AngularJSAngularJS笔记–自定义指令

         在前端开发中,
大家会遇见不少地点都会用到同样连串型的控件。AngularJS提供了自定义指令作用,大家得以在指令里面定义特定的html模板。提须要前台html调用.

         一. 发令的简易定义. 

            上面定义了1个归纳的控件,点击后调转到新浪。

            Note:
壹.命有名的模特式:directive必须以小写字母起先,个中如若后边由大写字母,html调用的时候就要用

  • 将单词分开.

 

<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
    .directive('myCnblogs',function(){
        return {
            restrict: 'E',
            replace: false,
            template:'<a href="http://www.cnblogs.com/">Go to cnblogs</a>'
        }
    })
</script>
<head>
    <title></title>
    <div ng-app='myapp'>
      <my-Cnblogs></my-Cnblogs>
    </div>
</head>
<body>
</body>
</html>

         贰.指令成分介绍:

            2.1  restrict

           
 常用的restrict有E,A,C二种设置。那几个设置可以混用,比如EA,AC。不要求符号隔开分离

           
 E(Element):成分,使用格式是<my-directive></my-directive>

             A(Propertity): 属性,使用格式:<div
my-directive></div>

             C(Class): 类, 使用格式:<div
class=’my-directive’></div>

            2.2 repleace

              上面是Replace分别设置false和True的功效**


             AngularJS 1

            AngularJS 2

2.3 termplate:

   template 是设置相应的html模板,
假设有html换行那就要在每一句末尾加上 / 符号.
借使html代码较多,可以因而安装templateurl:
urlpath,来加载对相应的代码模板

           3. 向指令内部添加数据

AngularJS,    3.一 上面通过安装scope简单的贯彻了多少的绑定.

<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module('myapp',[])
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            replace: true,
            scope:{
                myurl:"@",
                mycontent:"@"
            },
            template: '<a href="{{myurl}}">{{mycontent}}</a>'
        };
    });
</script>
<head>
    <title></title>
    <div ng-app='myapp'>
       <div my-Directive myurl='http://www.cnblogs.com/' mycontent='go to blogs'></div>
     </div>
</head>
<body>
</body>
</html>

            3.贰 深远通晓自定义控件scope的绑定

             自定义控件绑定$scope分为 @,=,&
两种情况。个人认为@:单向绑定,=:双向绑定,&:
用于绑定函数,下边看看Angularjs权威指南的介绍

             @
 本地功能域属性:使用@符号将本地作用域同DOM属性的值进行绑定。

             =
 双向绑定:通过=能够将当地功能域上的属性同父级效用域上的属性进行双向的数据绑定。 就像是常常的数据绑定1样,当地属性会反映出父数据模型中所发生的改动

             &  父级功效域绑定
通过&符号能够对父级功用域实行绑定,以便在内部运维函数。意味着对那一个值实行设置时会生成二个对准父级功用域的包装函数. 
 

             下边包车型地铁demo达成了对两种情况的绑定.      

<!DOCTYPE html>
<html>
<script src='angular.js'></script>
<script type="text/javascript">
angular.module("myApp", [])
        .directive("myDir", function() {
        return {
            restrict: "A",
            scope: {
                 name: "@",   
                 desc: "=", 
                 show: "&"    
            },
            template: 
                      "<div>" +
                      "  <input type='text' ng-model='name' />: <input ng-model='desc' />" +
                      "  <button ng-click='show()'>show</button>" +
                      "</div>",
            replace: true,
            link: function (scope, element, attrs) {
                console.log("initial value for name:" + scope.name);
                console.log("initial value for description:" + scope.amount);
                scope.$watch("desc", function (newVal, oldVal) {
                    console.log("desc has changed " + oldVal + " >> " + newVal);
                });        
                scope.$watch("name", function (newVal, oldVal) {
                    console.log("name has changed " + oldVal + " >> " + newVal);
                });
            }
        }
    })
    .controller("myCtrl", function($scope) {
            $scope.customerName = "Frank";
            $scope.content = 'Learning Angular';
            $scope.show = function(source) {
                alert(source);
              };
    })

</script>
<head>
<meta charset="utf-8" /> 
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

    <h3>普通的Angular</h3>
    <input type="text" ng-model='customerName'>: <input ng-model="content" />
    <button ng-click="show('普通函数')">show</button>

    <h3>自定义指令</h3>
    <div my-dir
      name="{{customerName}}" 
      desc="content"
      show="show('自定义指令绑定函数')">
    </div>
</body>
</html>

            上面是意义图:

            AngularJS 3

          四. 总结:

              本篇章介绍了自定义指令的简约实用.
能够经过自定义指令封装很多特定功效的html模板,供页面调用。
我们能够试1试将地点demo的 & 修改为
@恐怕=,经测试修改为@符号,自定义指令的show方法  
     是不恐怕履行的。如若改动为=号就很有意思了。点击下边包车型客车btn,会实施五回show方法。
然后修改任何贰个input,上面包车型地铁show方法都会被实施。假使有博友知道是什么来头也请在线回复一下。这些规律实在   不知晓是哪些来头。

相关文章