AngularJS:Direcitve指令用法解读（下）

作者: 阿羡吖 | 来源:发表于2018-03-12 16:15 被阅读0次

AngularJS:Direcitve指令用法解读（下）
AngularJS:Direcitve指令用法解读（上）
Angular相关指令
AngularJS 参考手册
AngularJS （2）
AngularJS 指令
AngularJS使用
Angular基础学习-01
15. Angular的内置指令(过滤器)
Angular

本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
此文接 AngularJs:Directive指令用法解读（上）

8、transclude
如果不想让指令内部的内容被替换，可以设置这个值为true。一般情况下需要ngTransclude指令一起使用。

<!DOCTYPE html>  
<html lang="zh" ng-app="myApp">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入门学习</title>  
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
</head>
<body>
  <div sidebox title="Links">
      <ul>
          <li>First Links</li>
          <li>Second Links</li>
      </ul>
  </div>
</body>
<script type="text/javascript">
    var app=angular.module('myApp',[]);
    app.directive('sidebox',function(){
       return {
          restrict:'EA',
          scope:{
            title:'@'
          },
          transclude:true,
          template:'<div class="sidebox">\
                <div class="content">'\
                    <h2 class="header">{{title}}</h2>\
                    <span class=-"content" ng-transclude>\
                    </span>\
                </div>\
          </dvi>'
       };
    }) ;
</script>
</html>

结果：

image.png
当 transclude:false,时

image.png

**如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在函数里使用$watch
服务。
9、controller
可以是一个字符串或者函数。
若为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数。

angular.module('myApp',[]).directive('myDirective',function(){
  restrict:'A', //始终需要
  controller:'SomeController'
})
//应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件
angular.module('myApp').controller('SomeController',function($scope,$element,$attrs,$transclude){
  //控制器逻辑放在这里
})

也可以直接在指令内部的定义为匿名函数，同样也可以注入任何服务（$log,$timeout等等）。

angular.module('myApp',[]).directive('myDirective',function(){
    restrict:'A',
    controller:function($scope,$element,$attrs,$transclude){
      //控制器逻辑放在这里
    }
})

另外还有一些特殊的服务（参数）可以注入
（1）$scope,与指令元素相关联的作用域
（2）$element，当前指令对应的元素
（3）$attrs，由当前元素属性组成的对象
（4）$transclude，嵌入链函数，实际被执行来用来克隆元素和操作DOM的函数。
注意，除非是用来定义一些可复用的行为，一般不推荐在这使用。

<!DOCTYPE html>  
<html lang="zh" ng-app="myApp">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入门学习</title>  
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
</head>  
<body>
  <hello mycolor="red">我是林炳文</hello>
</body>
<script type="text/javascript"> 
var app=angular.module('myApp',[]);
app.directive('hello',functiion(){
  return{
      restrict:"EA",
      translate：true，//注意此处必须设置为 true
      controller:function($scope,$element,$attrs,$transclude,$log){
          $transclude(function (clone){
              var a=angular.element('<p>');
              a.css('color',$attrs.mycolor);
              a.text(clone.text());
              $element.append(a);
          });
          $log.info("hello everyone")
      }
   } ;
});
</script>
</html>

输出结果：

image.png

并且在控制台下输出hello everyone
$transclude()它可以接受两个参数，第一个$scope作用域，第二个是带有参数clone的回调函数，而这个clone实际上就是嵌入的内容（经过jQuery包装）,可以在它上面做很多的DOM操作。

它还有最简单的用法就是

<script>
  angular.module('myApp',[]).directive('mySite',function(){
      return {
          restrict:'EA',
          transclude:true,
          controller:function($scope,$element,$attrs,$transclude,$log){
            var a=$transclude();  //$transclude() 就是嵌入内容
              $element.append(a);
          }
      };
  });
</script>

使用$transclude会形成一个新的作用域
默认情况下，如果简单的使用$tancsclude(),那么默认的其作用域就是$transclude生成的作用域。
但是如果使用$transclude($scope,function(clone){}),那么作用域就是directive的作用域了。
如果想使用父作用域可以使用 $scope.$parent.
同理：想要的得到一个新的作用域也可以使用$scope.$parent.new();
10、controllerAs
这个选项的作用是可以设置你自己的控制器的别名。
11、require（字符串或者数组）
字符串代表一个指令的名字，它将会作为link函数的第四个函数。

<!doctype html>  
<html ng-app="myApp">  
<head>  
  <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>  
</head>  
<body>  
<outer-directive>
  <inner-directive></inner-directive>
  <inner-directive2></inner-directive2>
</outer-directive>
<script>
  var app=angular.module('myApp',[]);
  app.directive('outerDirective',function(){
      return{
        scope：{}，
        restrict：‘AE’，
        controller:function(){
          this.say=function(someDirective){
            console.log('Got'+someDirective.message);
          };
        }
      };
  });
app.directive('innerDirective',function(){
    return{
      scope:{},
      restrict:'AE',
      require:'^outerDirective',
      link:function(scope,elem,attrs,controllerInstance){
        scope.message="Hi,leifeng";
         controllerInstance.say(scope);
      }
    };
});
app.directive('innerDrective2',function(){
    return{
      scope:{},
      restrict:"AE",
      require:"^outDirective",
      link:function(scope,attrs,elem,controllerInstance){
        scope.message='Hi,shushu';
          controllerInstance.say(scope);
      }
    } 
})
</script>
</body>
</html>

上面的例子中的指令innerDirective和指令innerDirective2复用了定义在outDirective的controller中的方法也进一步说明了，指令中的Controller是用来让不同指令间通信的。