angularjs - 在子指令中使用父指令和 $scope 的值

Question

示例:http://jsfiddle.net/r2zvreL8/1/

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

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

我需要 child 访问父模型值。所以我有:

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) { } 

}  

然后我按如下方式创建了 child :

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
  } 

}  

我尝试了几个选项来完成这项工作，但运气不佳......

1. 如何从 attributes.model 定义父级的 $scope.model？

2. 如何在子链接中访问 Controller (父)范围？

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

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>