Question

<form id="form1" runat="server" ng-app="myapp">
    Parent Scope  {{X}}
    <br />

    <div my-customer>
        <div ng-init="X ='Hello World'">
            ISOLATED SCOPE    {{X}}
        </div>
    </div>
</form>

指令

angular.module('myapp', [])
.directive('myCustomer',function()
{
return {
    restrict: 'A',
    scope: {}

}

}）

在上面的代码中，我创建了一个带有隔离范围的自定义指令。变量X被启动到“Hello World＆＃39;在自定义指令的隔离范围内。但我得到输出

Parent Scope Hello World 
ISOLATED SCOPE Hello World

第一个{{X}}应为空（因为自定义指令具有隔离范围）但它与第二个{{X}}具有相同的值。知道为什么吗？ Angularjs版本是
AngularJS v1.5.3

Answer 1

我的第一个预感是指令优先。来自the docs：

优先

当在单个DOM元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在调用编译函数之前对指令进行排序。优先级定义为数字。首先编译具有更高数字优先级的指令。预链接功能也按优先级顺序运行，但后链接功能以相反的顺序运行。具有相同优先级的指令的顺序是未定义的。默认优先级为0。

和ng-init has a priority of 450。因此，在指令隔离范围之前，似乎ng-init正在运行。尝试在您的指令声明中添加'priority：451'。

Answer 2

目前根本没有应用范围。

您必须使用模板选项。

＆＃13;

angular.module('myapp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.foobar = "foobar";
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'EA',
      scope: {
      	foobar: '@'
      },
      template:"INNER SCOPE {{foobar}}",
      controller: function($scope) {
      	$scope.foobar = "hello world";
      }
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form id="form1" runat="server" ng-app="myapp" ng-controller="myCtrl">
  Parent Scope {{foobar}}
  <br />

  <div my-customer foobar="Hallo welt" />
</form>

＆＃13;

Answer 3

我认为你的问题的罪魁祸首是ng-init使用。在其文档中，我们不建议在way

中使用它们

NgInit使用具有高优先级的预链接阶段中的范围，并将值设置为范围。

在Angular js中隔离范围

3 个答案: