angularjs - 多个指令 [ngController, ...] 请求新的/隔离的范围

Question

我有以下内容(https://jsfiddle.net/hhgqup4f/5/):

<div parent parent-model="vm.model1" ng-controller="Controller as vm">
   Parent
</div>

Controller 是:

app.controller("Controller", Controller);

function Controller() {
  var vm = this;
  vm.model1 = "My Model 1";
  vm.model2 = "My Model 2";
}

然后我有一个指令如下:

app.directive("parent", parent);

function parent() {

  var parent = {
    controller: ["$scope", controller],
    replace: false,
    restrict: "A",
    scope: {
      model: "="
    }
  };

  return parent;

  function controller($scope) { 
    console.log($scope.model);
  } 

}  

对于parent-model="vm.model1"，我试图说明指令应该使用 Controller 中的哪个属性。但是当我在指令中执行 console.log($scope.model) 时，我收到错误:

"Error: [$compile:multidir] Multiple directives [ngController, parent (module: app)] asking for new/isolated scope on: <div parent="" parent-model="vm.model1" ng-controller="Controller as vm">

如何解决这个问题？

Answer 1

错误...

"Error: [$compile:multidir] Multiple directives [ngController, parent (module: app)] asking for new/isolated scope on: <div parent="" parent-model="vm.model1" ng-controller="Controller as vm">

...非常具有说明性，因为 AngularJS 不允许多个指令(在同一 DOM 级别)创建自己的隔离范围。

根据documentation ，施加此限制是为了防止 $scope 的冲突或不受支持的配置对象。

通常，指令附带隔离 scope旨在组件化或重用附加到 DOM 的某些逻辑/操作。

因此，两个可重用组件不能合并在一起以产生组合效果(至少在 AngularJS 中)是有道理的。

解决方案

更改您的指令用法，以便为其提供来自其直接父级的所需属性(在本例中为 ngController 指令)。

<div ng-controller="Controller as vm">
  <div parent parent-model="vm.model1"></div>
</div>

类似地，您可以以规范化格式访问指令隔离范围传递的属性:

app.directive('parent', function(){
  return {
    scope: {
       parentModel: '='  // property passed from the parent scope
    },
    controller: function($scope){
       console.log($scope.parentModel); 
    }
  };
});

Demo

<小时/>

指令到指令的通信

如前所述，两个或多个具有隔离范围的指令不能在同一个 DOM 元素上使用。但是，其中一个指令可能具有独立的范围。在这种情况下，如果 require 需要，其他指令可以进行通信。 ing 其 Controller 如下:

<div dir-isolate dir-sibling></div>

...

.directive('dirIsolate', function(){
  return {
    scope: {},
    controller: function(){
      this.askSomething = function(){
         return 'Did you ask for something?';
      };
    }
  };
})
.directive('dirSibling', function(){
  return {
    require: 'dirIsolate', // here is the trick
    link: function(scope, iElement, attrs, dirSiblingCtrl){ // required controller passed to the link function as fourth argument
       console.log(dirSiblingCtrl.askSomething());
    }
  };
});