Question

我有两个指令，父和子，应用为：

<div parent parent-model="model">
  <div child>Child</div>
</div>

我需要孩子访问父模型值。所以我有：

angular.module("app").directive("parent", parent);

function parent() {

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

  return parent;

  function controller($scope) {
    $scope.model = "model";
  } 

  function link(scope, element, attributes) { } 

}

我按照以下方式创建了孩子：

angular.module("app").directive("child", child);

function child() {

  var child = {
    link: link,
    replace: false,      
    restrict: "A"
  };

  return child;

  function link(scope, element, attributes, controller) { 
    // NEED parent-model value here.
    console.log(controller.model); // Returns undefined
  } 

}

我尝试了一些选项来完成这项工作，但没有运气......

如何在attributes.model中定义父级的$ scope.model？
如何访问子链接中的控制器（父）范围？

至少我认为这是我需要做的事情吗？

Answer 1

以下是使用$parent的一种解决方案。

jsfiddle

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.model = {
      x: 2
    };
  })
  .directive("parent", parent)
  .directive("child", child);

function parent() {

  var parent = {
    controller: controller,
    link: link,
    replace: false,
    transclude: true,
    template: "<span ng-transclude></span>",
    restrict: "A",
    scope: {
      parentModel: "="
    }
  };

  return parent;

  function controller($scope) {
    console.log('parent', $scope.parentModel);
  }

  function link(scope, element, attributes) {}

}

function child() {

  var child = {
    link: link,
    replace: false,
    restrict: "A",
  }
  return child;

  function controller($scope) {}

  function link(scope, element, attributes) {
    console.log('child link', scope.$parent.parentModel);
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <span parent parent-model="model">
      <div child>Child</div>
    </span>

  </div>
</div>

使用controllerAs语法的另一种解决方案。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.model = {
      x: 2
    };
  })
  .controller('ParentController', function() {
    console.log('parent', this);
  })
  .directive("parent", parent)
  .directive("child", child);

function parent() {

  var parent = {
    controller: "ParentController",
    controllerAs: "pr",
    link: link,
    replace: false,
    transclude: true,
    template: "<span ng-transclude></span>",
    restrict: "A",
    scope: {
      parentModel: "="
    },
    bindToController: true,
  };

  return parent;


  function link(scope, element, attributes) {}

}

function child() {

  var child = {
    link: link,
    replace: false,
    restrict: "A",
    require: "^parent"
  }
  return child;


  function link(scope, element, attributes, ctrl) {
    console.log('child link', ctrl);
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <span parent parent-model="model">
      <div child>Child</div>
    </span>

  </div>
</div>

Answer 2

您可以使用范围属性在指令范围内的变量和属性中定义的父控制器之间创建双向绑定。

     scope: {model: '=model'}

对于你的第二个问题，答案很简单。只要指令不创建隔离范围，您的指令范围原型继承自其父范围。

在你提供的片段中，

console.log(scope.model)

第二个链接函数中的

应该允许您访问父作用域中的model变量。

一个很好的技巧是，$parent仍然可用作对父作用域的引用，即使您创建了一个隔离的作用域。

在子指令中，使用来自父指令和$ scope的值

2 个答案: