多个指令，一个元素具有单独的作用域

Multiple directives with individual scopes for one element

本文关键字：单独 作用域 元素 指令 一个      更新时间：2023-09-26

一个元素可以有多个具有单独作用域的指令吗？

假设我们有自定义指令的子指令，具有控制器的作用域和任何指令（这里是"ng-class"）：

<custom-directive data-model="model">
  <input class="child" data-ng-class="controllerScopeValue">
</custom-directive>

现在我们要向子级添加具有隔离作用域的额外指令。像这样：

angular.module('core').directive('customDirective', [function($compile) {
  return {
    scope: {
      'model': '='
    },
    compile: function(templateElement, templateAttrs) {
      templateElement.children().attr('data-ng-model', 'directiveScopeValue');
      return function($scope) {
        $scope.directiveScopeValue = 'directive''s scope value';
      }
    }
  };
}]);

那么，如何为每个指令保留单独的范围呢？

不，这是不可能的，如果你尝试这样做，你会得到类似于

多个指令 [myDirective1， myDirective2] 要求新的/隔离的作用域

普伦克

忽略下面的虚拟代码

app.directive('myDirective1', ['$document',
function ($document) {
return {
    restrict: 'A',
    replace: false,
    scope : {},

和 

app.directive('myDirective2', ['$document',
function ($document) {
return {
    restrict: 'A',
    replace: false,
    scope : {},
相关文章：