Question

如果我多次在一个页面中使用该指令，控制器是否会共享它的范围？虽然我认为没有分享，但我仍然希望有人帮我理解这一点。

如果我定义变量＆＃39; isWidgetEnabled＆＃39;在fooController中，它是否会共享两个指令，如果我想要每个指令＆＃39; foo＆＃39;有自己的变量，我该怎么做？

JS：

angular.module("module")
  .controller("fooController", ["$scope", function($scope) {
    ...
  })
  .directive("foo", function() {
    return {
      restrict: "E",
      controller: "fooController",
      link: function($scope, $element, $attrs) {
        // Do some things with the scope of the controller here
      }
    }
  });

HTML：

<html>
    <head>
    <!-- Scripts here -->
    </head>
    <body ng-app="module">
        <foo/>
        <foo/>
    </body>
</html>

Answer 1

是的，它将在所有指令中共享，因为默认情况下指令的范围是继承，这意味着它与控制器共享相同的范围。

Answer 2

如果需要在控制器中为每个指令维护一个单独的变量，则应该通过指令属性显式传递这些变量，并通过前缀将它们绑定到隔离的作用域。

这是一个例子。我在此代码中有foo指令，该指令在dom中的两个位置使用。该指令根据dom元素的属性修改范围变量。

代码设置为使用指令元素的html设置<span>元素的html。

<div ng-controller="fooController">       

   <div foo scopevar="dir1Data">Div1</div>   <!--Here you tell which controller variable to effect by the directive-->
   <div foo scopevar="dir2Data">Div2</div>

   <span>{{dir1Data}}</span><br>
   <span>{{dir2Data}}</span>         

</div>

你的角度代码

.controller('fooController', function($scope) { 

    $scope.dir1Data = '';
    $scope.dir2Data = '';                       
})

.directive('foo', function(){
    return {

        scope: {

            //You set the prefix "=" here. This tells angular the variable name 
            //mentioned in the scopevar attribute should be two-way bound
            //to the controller scope 

            scopevar:'='  
        },

        link: function(scope, ele, attr) {
            scope.scopevar = ele.html();   //Here I modify the controller variable
        }
    }                
})

多个相同的指令共享范围变量？

2 个答案: