• 指令的作用域


    指令内部通过scope:true false {} 三种来控制作用域。

    先来介绍scope:true的情况:

       <div ng-controller="firstCtrl">
            {{myProperty}} 
            <input ng-model="myProperty" /><br />
            <div my-directive></div>
        </div>
        <script>
            angular.module('testApp', [])
            .controller('firstCtrl', ['$scope', function ($scope) {
                $scope.myProperty = 'hello word';
            }])
            .directive('myDirective', function () {
                return {
                    restrict: 'A',
                    scope: true,
                    template: '<div>内部{{myProperty}}<input ng-model="myProperty">'
                }
            })
        </script>

    用这种方式控制的作用域表示为继承并且隔离,也就是说,指令内部是继承了firstCtrl的myProperty变量,通过修改父控制器变量值的时候,指令内部也会发生变化。

    但修改指令内部的变量时,不会影响到父控制器的变量。需要注意的是,当修改了一次指令内部值的时候,如果再次修改父控制的变量,这时指令内部的变量不再会跟随父控制器发生变化,

    相当于在指令内部创建了一个自己的变量。

    scope: false 时,表示继承但不隔离,也就是说父控制器的变量和指令内部中的变量始终保持一致。

    scope:{}时,表示隔离且不继承,但是,如果需要使用父作用域传入的参数,可以使用:@ = & 三种来进行绑定,@表示进行单向传入,参数会以一个字符串的形式传入到指令中。

          这种方式需要注意的是,如果传递对象时,对象也会变成字符串,这就需要用=号来进行传递,=表示为双向传入,也就是说传入的变量和父作用域始终保持一致。

          &一般当传入方法时,用到这个地址符。(后续会有详细的说明,并填上代码)

    transclude:一般在嵌套指令时会用到这个属性。一般来说,指令会把内容替换为内部的模板,但有一种情况就是当指令的元素下面还有其他的html元素时,这时,其他的html元素会被替换,这显然不是想要的结果。

    所以这时候就需要设置transclude这个属性了。

     <div ng-controller="bodyCtrl">
            <div father-directive><span>{{str}}</span></div>
        </div>
        <script>
            angular.module('testApp', [])
            .controller('bodyCtrl', ['$scope', function ($scope) {
                $scope.str = 'ctrl';
            }])
            .directive('fatherDirective', function () {
                return {
                    restrict: 'A',
                    transclude: true,
                    template: ' <div>father <div ng-transclude></div></div>'
                }
            })
            .directive('sonDirective', function () {
                return {
                    restrict: 'A',
                    template: '<div>son</div>'
                }
            })

    上面的代码中可以看到,在指令的内部又包含了一个bodyCtrl的str变量,这时,如果没有transclude:true的话,这个str会直接被替换,而不显示,

    所以设置transclude:true之后,在指令内部模板中,设置一个元素如div并设置一个ng-transclude属性,这样就把这些外部元素都放到了这个div下。

      

  • 相关阅读:
    ISO9126 软件质量模型
    java 15.String
    java 14. ArrayList常用方法
    java 13. 方法重载构造方法块this用法
    linux ssh连接心跳检查断开连接
    关于递归,我有几句话想说
    pytest 报错 ImportError: cannot import name 'main'
    递归回溯剪枝之斐波那契数列
    appium-doctor诊断信息不完整
    数据驱动,关键字驱动,混合驱动简单模型
  • 原文地址:https://www.cnblogs.com/y8932809/p/5606183.html
Copyright © 2020-2023  润新知