Question

我有一个自定义指令，它有自己的范围，它接受来自指令的DOM属性的值，但是我也希望从指令中访问$scope的一些变量。任何人都可以帮我这样做。

这是我的指示以及我如何使用它。

appDirectives.directive('appTemplate', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/templates/template.html',
        scope: {
            template: '='
        },
    }
});

<div ng-repeat="template in templates" ng-click="chooseTemplate(template)">
    <app-template template="template"></app-template>
</div>

这是指令的模板，这里我有模板值，但我也想访问$scope.rootPath

<div class="template">
    {$ ???scope.rootPath??? $}
    {$ template is accesable $}    
</div>

Answer 1

您也可以使用is with isolated scopes：

appDirectives.directive('appTemplate', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/templates/template.html',
        scope: {
            template: '=',
            rootPath: '='
        },
    }
});

<div ng-repeat="template in templates" ng-click="chooseTemplate(template)">
    <app-template template="template" root-path="rootPath"></app-template>
</div>

...然后像往常一样访问它：

<div class="template">
    {$ rootPath is accesable $}
    {$ template is accesable $}    
</div>

可能还有其他解决方案，但这对您有用。

Answer 2

您正是如何将对象传递到隔离范围中的。如果您的控制器位于指令的父级中，则该指令将继承控制器的功能。

除非你需要它有一个独立的范围，例如模板中的每个模板都有自己唯一的值，你可以像现在这样将对象作为对象传递。

Answer 3

看起来您不必为该指令声明本地范围，没有它就可以访问这些属性。省略范围声明后，它将起作用，指令将如下所示：

appDirectives.directive('appTemplate', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/templates/template.html',
        transclude: true
    }
});

另一种方法也是可行的，就是将$ scope.rootPath作为参数注入到指令中。

Answer 4

另一种选择是从父作用域原型继承appTemplate，并使用$parse作为template属性。

app.directive('appTemplate', ['$parse', function($parse) {
  return {
    restrict: 'E',
    templateUrl: 'template.html',
    link: function(scope, elem, attrs) {
      var templateGet = $parse(attrs.template);
      scope.$watch(templateGet, function(value) {
        scope.template = value;
      });
    }
  };
}]);

它会看到来自outtermost范围（templates，rootPath等）的所有变量，但实际上并不依赖于ng-repeat中迭代变量的名称。所以这两个：

<div ng-repeat="template in templates">
  <app-template template="template"></app-template>
</div>

和此：

<div ng-repeat="t in templates">
  <app-template template="t"></app-template>
</div>

无需任何修改即可运作。

注意事项：

如果ng-repeat被定义为ng-repeat="t in templates"只是因为您已经在子范围内有一个名为template的变量，那么您实际上是注定要失败，因为appTemplate会覆盖它内部（这不会影响父变量）
如果appTemplate用于编辑已继承的数据，则这些数据必须至少为第二级属性（customer.firstName，而不是firstName）。这是对范围继承的一般警告。

工作plunker。

AngularJS - 如何从具有指定范围的指令访问$ scope

4 个答案: