【问题标题】：Two way data binding between controller and external directive控制器和外部指令之间的双向数据绑定
【发布时间】：2013-12-23 03:32:30
【问题描述】：

我的设置：

想象一个购物车的控制器：

app.controller('CartCtrl', function ($scope) {
    $scope.data = [
        {
            id:0,
            title:'article1'
        },
        {
            id:1,
            title:'article2'
        }
    ];

    $scope.countItems = function(){
        var num = 0;
        for(var i in $scope.data){
            num++
        }
        return num;
    } 
});

在页面某处使用：

<ul ng-controller="CartCtrl">
    <li ng-repeat="item in data">{{item.title}}</li>
</ul>

其他地方我想显示购物车中的商品数量：

<div cart-item-number>{{countItems()}}</div>

为了连接数据，我使用了一个指令：

app.directive('cartItemNumber', function() {
    return {
        restrict: 'A',
        controller: 'CartCtrl'
    };
});

我的问题：

在页面加载时会显示正确的数字。但是，如果我从数据对象中删除或添加项目，cart-item-number 不会更新。

我该如何解决这个问题？

【问题讨论】：

标签： javascript angularjs data-binding angularjs-directive angularjs-scope

【解决方案1】：

所以ng-controller="CartCtrl" 和controller: 'CartCtrl' 是两个不同的对象。在指令声明中，您为指令指定控制器。当您的应用程序启动时，它们都使用相同的数据进行初始化，因此它似乎可以始终如一地工作。

如果您想显示CartCtrl 范围内的项目数，则不需要使用指令（顺便说一句。最好只使用data.length）。如果您的意图是在范围之外显示它，那么您必须创建某种形式的通信。或者至少将您的cart 移到更高的范围层次结构中——当然，在$rootScope 上，它会在您的应用程序中随处可见（除非您使用的是isolated scope）。

【讨论】：

【解决方案2】：

首先，原因是因为您不在同一个范围内工作。考虑以下示例：

<body>
  <ul ng-controller="CartCtrl">
    <li ng-repeat="item in data">{{item.title}}</li>
  </ul>
  <div cart-item-number>{{countItems()}}</div>
</body>

指令在 RootScope 上注册，而 ngController 是一个子作用域。因此，您实际上得到了两个数据副本。我建议你使用AngularJS Batarang Chrome 插件来可视化上述范围和模型。

将上面示例中的 ng-controller 移动到正文中，您将看到预期的行为。

但是，您使用控制器的方式被认为是不好的做法。指令控制器的唯一目的是将 API 暴露给其他指令，以便指令与指令通信。其中“普通”控制器（用于 ngController 和路由）用于扩大范围并向范围对象添加行为。

如果您需要在“普通”控制器和指令之间进行通信，您应该使用中介服务（让您的控制器和指令都依赖此服务），或者使用 $scope 事件，如 $scope.$broadcast 和 $ scope.$emit 在它们之间进行通信。这将您的控制器与指令分离，并允许可重用组件和简单的测试。

【讨论】：