AngularJS笔记–自定义指令

         在前端开发中,
我们见面逢多地方还见面用到同样种档次的控件。AngularJS提供了由定义指令功能,我们好以指令中定义特定的html模板。提供给前台html调用.

         一. 命的简要定义. 

            下面定义了一个简练的控件,点击后调整转至博客园。

            Note:
1.命名方式: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的功能**


             图片 1

            图片 2

2.3 termplate:

   template 是安装相应的html模板,
如果有html换行那就如当各国一样词末尾加上 / 符号.
如果html代码较多,可以通过安装templateurl:
urlpath,来加载对应该的代码模板

           三. 向指令中添加数据

    3.1 下面通过安装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.2 深入了解从定义控件scope的绑定

             自定义控件绑定$scope分为 @,=,&
三种情形。个人认为@:单向绑定,=:双向绑定,&:
用于绑定函数,下面看看Angularjs权威指南的牵线

             @
 本地作用域属性:使用@符号将地面作用域同DOM属性之价进行绑定。

             =
 双向绑定:通过=可以将地面作用域上的特性和父级作用域上的特性进行双向的数绑定。 就如一般的数目绑定一样,本地属性会反映出大数据模型中所起的变动

             &  父级作用域绑定
通过&符号可以针对父级作用域进行绑定,以便在中间运行函数。意味着对这个价进行设置时见面变动一个对父级作用域的包装函数. 
 

             下面的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>

            下面是功能图:

            图片 3

          四. 总结:

              本篇章介绍了于定义指令的粗略实用.
可以透过由定义指令封装很多一定功能的html模板,供页面调用。
大家可尝试一试行将上面demo的 & 修改也
@或者=,经测试修改为@符号,自定义指令的show方法  
     是无力回天尽的。如果改动也=号就大风趣了。点击上面的btn,会执行两不成show方法。
然后改外一个input,下面的show方法还见面叫实践。如果产生博友知道凡是什么原因吗要在线回复一下。这个原理实在   不懂得是呀来头。

相关文章