angularjs1-4 事件指令

简介:
复制代码
      <div ng-app="myApp">

          <div ng-controller="firstController">
                <div ng-click="run()">点击{{text}}</div>
                
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope){
                $scope.text='phonegap中文网';

                  $scope.run=function(){

                      alert('run');
                      console.log('run');
                  }
          });
      </script>
复制代码

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              <input type="checkbox" ng-model="sel">
              <select>
                  <option>11111</option>
                  <option ng-selected="sel" >22222</option>
                  //select="selected"
              </select>
              <input type="checkbox" ng-change="change()" ng-model="c" />
              {{c}}
              <br>
              <input type="text" value="你好" ng-copy="aaa='按下复制键的时候执行的事件'">{{aaa}}
              <input type="text" value="你好" ng-cut="bbb='按下剪切键的时候执行的事件'">{{bbb}}
              <input type="text" value="你好" ng-paste="ccc='按下黏贴键的时候执行的事件'">{{ccc}}
              <br>
              <br>
              <div ng-bind="text"></div>
              <div ng-cloak>{{text}}</div> //防止加载慢出现{{}}
              <div ng-non-bindable>{{text}}</div>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope){
              $scope.text='phonegap中文网';
              $scope.change=function(){
                if($scope.c==true){
                    alert('选中');
                }else{
                    alert('未选中');
                }
              }
          });
      </script>
    </body>
</html>
复制代码

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              <input type="button" ng-value="text" ng-disabled="isDisabled">
              <input type="text" value="{{text}}" ng-readonly="isDisabled">
              <input type="checkbox" value="{{text}}" ng-checked="isDisabled">
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope,$interval){
                $scope.n=5
                $scope.text= $scope.n+'';
                $scope.isDisabled=true;
               var time=$interval(function(){
                   $scope.n--;
                   $scope.text= $scope.n+'';
                   if($scope.n==0){
                       $interval.cancel(time);;
                       $scope.text='可以点击了';
                       $scope.isDisabled=false;
                   }
               },1000);
          });
      </script>
    </body>
</html>
复制代码

 本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7225207.html,如需转载请自行联系原作者

相关文章
|
6月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2150 0
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发 容器
|
索引 图形学