1.anglurJS常用指令,自定义指令,连接代码块,控制器学习

作者：从前慢现在也慢 | 2024-05-29 08:09:28

踩

anglur

1.anglurJS常用指令,自定义指令,连接代码块,控制器学习

常用的指令

ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=“myModule”）连接到代码模块。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
ng-model 指令
ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, 但在使用它时需要以 - 分割, nameSelf => name-self

常用的方法

controller方法

		app.controller('myCtrl', ($scope)=>{
            $scope.firstname = "威尔";
        });
        app.controller('myCtrl', function($scope){
            $scope.firstname = "威尔";
        });
        app.controller('myCtrl', ['$scope', function($scope) {
      		$scope.firstname = "威尔";
  		}]);
1
2
3
4
5
6
7
8
9

directive方法

       app.directive('myLable', function () {
           return {
               restrict: "EAMC", 
               template: "呦呦切克闹",
               //replace : true//我们需要在该实例添加 replace 属性， 否则评论是不可见的。
           }
       })
1
2
3
4
5
6
7

注意事项

ng-init可用于ng-repeat这些特殊指令,如下面例子,可以使用ng-init定义当前循环的index

	<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
       <span> {{innerIndex}}</span>
    </div>
1
2
3

directive方法特性

当同时调用first和second时,只有first生效,两个template不会同时出现。
当设置了 scope:{} 之后,{{name}}获取不到了,原因就是作用域的问题,想要设置这里的name的值,可以再加一个controller的字段。
参数详情如下

angular.module('myApp', []).directive('first', [ function(){
    return {
        scope: false, //默认值为 false 共享父作用域 值为true时共享父级作用域并创建指令自己的                      
        controller: function($scope, $element, $attrs, $transclude) {}, 
        					//作用域  值为{}时创建全新的隔离作用域, 值为string时为控制器名称
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        template: 'first name:{{name}}',//值为string、function 用于显示dom元素
        templateUrl: 'xxx.html' //值为string function 以id为xxx.html为 调用文件显示
        priority: 0 //指明指令的优先级，若在dom上有多个指令优先级高的先执行
        replace: flase // 默认值为false 当为true是直接替换指令所在的标签
        terminal: true //值为true时优先级低于此指令的其它指令无效
        link:function // 值为函数 用来定义指令行为从传入的参数中获取元素并进行处理
    };
}])
1
2
3
4
5
6
7
8
9
10
11
12
13
14

多个自定义组件的template只能显示出一个
ng-model 是用于表单元素的，支持双向绑定。对普通元素无效；
ng-bind 用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当 ng-bind 和 {{}} 同时使用时，ng-bind 绑定的值覆盖该元素的内容。
用 ng-bind 比 {{}} 友好很多。
有时候绑定 ngModel 到一个 getter/setter 函数时很有用的。getter 是一种能返回一个模型表示的无参函数，setter 是只有一个参数的用于设置模型内部状态的函数。它对于模型内部与视图显示时所用的数据形式不一致时非常有用。
要使用它，你需要添加 ng-model-options="{ getterSetter: true }" 到一个有 ng-model 元素上。你也可以添加 ng-model-options="{ getterSetter: true }" 到上，使的表单中的所有都生效。
这个方法的好处在于我们可以将整个表单作为一个对象去处理
ngModel 绑定 getter/setter 实例

代码举例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    </head>
    
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    
    //ng-model指令对于表单控件的值的双向绑定
        名:<input type="text" ng-model="firstname"/><br/>
        姓:<input type="text" ng-model="lastname"/><br/>
        姓名:{{firstname + ' * ' + lastname}}<br/>
        外国名:{{person.firstName+'*'+person.lastName}}<br/><br/>
    
        //ng-repeat 指令遍历字符数组:
        <ul>
            <li ng-repeat="item in array">
                {{item}}
            </li>
        </ul>
 
        //ng-repeat 指令遍历对象数组:
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>国籍</th>
            </tr>
            <tr ng-repeat="item in foregins">
                <td>{{item.name}}</td>
                <td>{{item.country}}</td>
            </tr>
        </table>
    
    //注意:多个template只能显示出一个
    各种方式调用自定义指令: 
        一般方式调用自定义指令:<my-lable/>
        类名方式调用自定义指令:<span type="text" class="my-lable"/>
        属性方式调用自定义指令:<span type="text" my-lable/>
        注释方式调用自定义指令:<!-- directive: my-lable -->
    
    </div>
    </body>
    
    <script>
        //AngularJS 模块定义应用:
        // 通过ng-app的值连接到代码块
        var app = angular.module('myApp', []);
    
        // AngularJS 控制器控制应用:
        //通过 .controller 方法初始化变量
        app.controller('myCtrl', ($scope)=>{
            $scope.firstname = "威尔";
            $scope.lastname = '史密斯';
            $scope.person = {firstName: 'Will', lastName: 'Smith'};
            $scope.array = ['zhangcongying', 'hanchuang', 'yaobo', 'heqi', 'liuyuan', 'ganweiling'];
            $scope.foregins = [
                {name: 'Jani', country: 'Norway'},
                {name: 'Hege', country: 'Sweden'},
                {name: 'Kai', country: 'Denmark'}]
        });
        
        // 通过 .directive方法添加自定义的指令
        app.directive('myLable', function () {
            return {
                restrict: "EAMC", 
                template: "呦呦切克闹",
                //replace : true//我们需要在该实例添加 replace 属性， 否则评论是不可见的。
            }
        })
    </script>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

执行截图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/641288