angularjs - 将参数传递给具有隔离范围的嵌套指令

我在data中有一个对象MainCtrl。该对象用于将数据传递给指令first-directive和second-directive。在这两种情况下都必须进行两个数据绑定(bind)。

对于first-directive，我传递完整的对象data，但是对于second-directive我想传递numbers对象(scope.numbers = scope.dataFirst.numbers)。

问题:

当我执行<div second-directive="dataFirst.numbers"></div>，并且检查dataSecond是否是一个对象时，它返回true。

但是，当我执行<div second-directive="numbers"></div>并检查dataSecond是否为对象时，它将返回false。

在这两种情况下，如果我都执行console.log(scope)，则会显示scope.dataSecond属性。

问题:

为什么会发生这种情况？将参数传递给指令的正确方法是什么？

编辑:
这个想法是使指令可重用，这意味着它们不能依赖于其他指令。

angular.module('app',[])

.controller('MainCtrl', function($scope) {
  $scope.data = {
    numbers: {
      n1: 'one',
      n2: 'two'
    },
    letters: {
      a: 'A',
      b: 'B'
    }
  }
})

.directive('firstDirective', function () {
  return {
    template: '<div class="first-directive">\
      <h2>First Directive</h2>\
      {{dataFirst}}\
      <div second-directive="dataFirst.numbers"></div>\
      <div second-directive="numbers"></div>\
      </div>',
    replace: true,
    restrict: 'A',
    scope: {
      dataFirst: '=firstDirective'
    },
    link: function postLink(scope, element, attrs) {
      console.log('first directive')
      console.log(scope)
      scope.numbers = scope.dataFirst.numbers;
    }
  };
})

.directive('secondDirective', function () {
  return {
    template: '<div class="second-directive">\
      <h2>Second Directive</h2>\
      {{dataSecond}}\
      <div class="is-obj">is an object: {{isObj}}</div>\
      </div>',
    replace: true,
    restrict: 'A',
    scope: {
      dataSecond: '=secondDirective'
    },
    link: function postLink(scope, element, attrs) {
      console.log('second directive');
      console.log(scope)

      // <div second-directive="XXXX"></div>
      // if 'numbers' returns undefined
      // if 'dataFirst.numbers' returns the object
      console.log(scope.dataSecond);

      scope.isObj = false;

      if(angular.isObject(scope.dataSecond)){
        scope.isObj = true;
      }
    }
  };
});

h2 {
  padding: 0;
  margin: 0;
}

.first-directive {
  background: #98FFDA;
  color: black;
  padding: 10px;
}

.second-directive {
  background: #FFA763;
  color: white;
  padding: 10px;
}

.is-obj {
  background: blue;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h2>MainCtrl</h2>
    {{data}}

    <div first-directive="data">
    </div>

    <div second-directive="data">
    </div>
  </body>

</html>

最佳答案

我会重复我之前所说的-link的firstDirective函数是后的 -link函数，在到link的secondDirective函数之后运行，因此scope.numbers尚未分配对象scope.dataFirst.numbers。

但是，对我来说，通过require紧密耦合两个指令的解决方案似乎不太理想。

相反，要确保在运行内部/子指令之前在父级中正确分配了一个范围属性(例如secondDirective，在这种情况下)是在firstDirective中使用 pre -link函数(而不是 post -关联)

link: {
  pre: function prelink(scope){
      console.log('first directive')
      console.log(scope)
      scope.numbers = scope.dataFirst.numbers;
    }
}

Demo
关于angularjs - 将参数传递给具有隔离范围的嵌套指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30154100/