Question

让我们定义一个简单的场景，其中博客包含Post个列表，每个列表都包含Comment个和Object个。

在构建Post页面时，我可以定义以下元素：

<post post="post"></post>
<comments post="post"></comments>
<objects post="post"></objects>

或：

<post post="post">
    <comments></comments>
    <objects></objects>
</post>

为了提供可重用性，与元素关联的每个指令都有自己的隔离范围。

然后考虑与<comments>相关联的指令，我可以为其提供Add按钮，Reload comments按钮等。只要它的简单，这很容易功能仅限于其自身的范围。

首次加载Comment时，在与Post关联的指令的link方法中加载

<comments>。当（父级）Comment发生变化时，如何触发Post重新加载？

在与<comments>相关联的指令中，我应该在关联的scope.$watch('post')更改并触发更改Post s重新加载时放置Comment来监听吗？
我应该在register指令中创建Post函数，其中Comment和Object订阅自己的控制器，并从{{1}通知函数何时需要重新加载？也就是说，手动实现的Observer模式。
Post和$broadcast？不确定如何使用隔离范围实现它们。

Answer 1

这里最合适的事情我会说是使用一个事件。如果范围是隔离的，您可以从指令控制器（或其他控制器）广播，如下面的答案：

AngularJS : broadcast event from directive

以下是一些代码，演示如何处理隔离范围和事件等：

http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview

app.directive('post', function() {
  return {
    scope: {},
    link: function(scope, elem, attrs) {
      console.log('post');
    },
    controller: function($scope) {
      tellComments = function() {
        console.log('telling comments');
        $scope.$broadcast('heyComments');
      };
    },
    template: '<button ng-click="tellComments()">sup</button><div comments></div>'
  };
})

app.directive('comments', function() {
  return {
    scope: {},
    link: function(scope, elem, attrs) {
      console.log('comments');
    },
    controller: function($scope) {
      $scope.$on('heyComments', function() {
        console.log('sup post!');
      });
    }
  }
})

模板：

  <body ng-controller="MainCtrl">
    <div post>
      <button ng-click="tellComments()">click me</button>
    </div>
  </body>

所以单击按钮，或者执行任何其他操作（例如加载一些数据），调用函数'tellComments'然后被发送到子指令，由控制器范围处理 - 与指令范围不同。

AngularJS子指令取决于父指令的可重用性

1 个答案: