angular-自定义指令-E

angular自定义指令

(1)directive---restrict属性EACM

(function() {

  'use strict';

  angular.module('app')

    .directive('searchTitle', ['$timeout', function($timeout) {

      return {

        restrict: 'EA'，

        }

E:元素，html使用方式：

A:属性，html使用方式：

C:class属性，html使用方式：

M:注释，html使用方式：

(2)directive---scope隔离作用域，用户和父作用域进行沟通交互的方式，三种形式：@，=，&

@ :  表示单向绑定，接收父作用域的一个变量值，值改变后不影响父作用域的变量值

= ：引用传递,与父scope中的属性进行双向绑定

& :  传递一个来自父scope的函数,一个操作

 return {

        restrict: 'EA'，

        scope:{

               highSearch: '@',  //值传递 （字符串，单向绑定）

              searchData:'&',   //传递一个来自父scope的函数,一个操作，这个函数会在html对应的js中实现

               inputData:'='    //引用传递，双向绑定

          },

  }

(3)directive---templateUrl模板   + template模板

return {   template:"

这是自定义指令中的模板

"  }

结合replace:true;属性，当restrict为E时，就替换整个template中的内容显示到页面

假设，template模板内的内容过多，就应该使用

return{ templateUrl：'tpl/blocks/searchTitle.html',  }来对应一个单独的html模板文件

(4)directive---link    在指令中操作DOM，我们需要link参数，这参数要求声明一个函数，称之为链接函数。

link: function(scope, element, attrs) {

　　// 在这里操作DOM

}

如果指令使用了require选项，那么链接函数会有第四个参数，代表控制器或者所依赖的指令的控制器。

// require 'SomeController',

link: function(scope, element, attrs, SomeController) {

　　// 在这里操作DOM，可以访问required指定的控制器

}

参数说明：scope，element, attrs

scope：即与指令元素相关联的当前作用域，可以用来注册监听器：scope.$watch()

element：即当前指令对应的元素，使用它可以操作该元素及其子元素。例如，这个span就是指令 my-directive所使用的元素。

attrs：由当前元素的属性组成的对象。

到此，设置E属性尝试

---

html文件

1.html

对应的js文件：

1.js

观察1.html，可以发现my-dir是个自定义指令，

自定义指令directive文件：

myDir.js

解析此文件，restrict设置为”E“,页面呈现为元素，scope作用域中name为单向值传递，amount为双向绑定，save为传递一个来自父scope的函数,一个操作

template:"

"+"{{name}}: "  + "保存"  + "

",结合replace为true，就替换模板内容。

其中button的ng-click = 'save()',那么这个save事件的响应，就靠指令和js交互了，

scope中配置了save:"&",

页面html中指令配置的是，,相当于把js中的$scope.saveChanges事件传递过来了

link在指令中操作dom,

注册监听器：scope.$watch("amount",function(newVal,oldval){    

     //这里是监听amount对应的”credit“值的变化，amount="credit"对应的是js的$scope.credit

});

scope.$watch("name",function(newVal,oldval){

     //这里是监听name对应的{{customerName}}值的变化，页面中name="{{customerName}}"对应的是js的$scope.customerName

});

//发现文章 https://blog.csdn.net/baidu_24024601/article/details/52710331