AngularJS：自定义指令中的两种方式数据绑定不起作用答案

【问题标题】：AngularJS : Two Way Data Binding in a Custom Directive Not WorkingAngularJS：自定义指令中的两种方式数据绑定不起作用
【发布时间】：2014-07-22 11:24:55
【问题描述】：

我在试图理解为什么两种方式的数据绑定在我的自定义指令中不起作用时遇到了问题？

密码：

指令代码：

.directive('invoiceFilter', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '_invoice-filter.tpl.html',
        scope: {
            selectedItem: '=',
            selectedItemChange: '&'
        },
        link: function(scope) {

            scope.items = {
                all: 'Show all invoices',
                draft: 'Show drafts only',
                open: 'Show open invoices',
                paid: 'Show paid invoices'
            };

            scope.raiseSelectedItemChange = function (key) {


                alert('Selected item in directive: ' + key + " (which seems to work!)");

                scope.selectedItem = key;
                scope.selectedItemChange();

            };

        }
    };
});

指令模板

<div class="btn-group dropdown">
    <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        {{ items[selectedItem || 'open' ] }}
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li ng-repeat="(key, value) in items">
            <a href="javascript:void(0)" ng-click="raiseSelectedItemChange(key)">{{ value }}</a>
        </li>
    </ul>
</div>

如您所见，我只是将一些数据添加到范围（在链接函数中）并依赖 ng-repeat 和 ng-click 的行为来引发一个事件/回调一个项目被选中。警报正确显示所选项目。

但是当我开始使用这样的指令时：

HTML

  <body ng-controller="MainController">
    <h1>Hello Plunker!</h1>
    <invoice-filter selected-item="filter" selected-item-change="filterChange()"></invoice-filter>
  </body>

控制器

    .controller('MainController', function($scope) {

        $scope.filter = "all";

        $scope.filterChange = function() {

          alert("Selected item in controller: " + $scope.filter + " (does not work, databinding problem???)");

        };

    })

$scope.filter 的值永远不会随着我在指令中选择的项目而更新，即使我在指令范围上指定了“=”，据我所知，这应该启用双向数据绑定，对吧？

我在这里错过了什么？

朋克游乐场

这是带有上述设置的plunkr，因此您可以验证它是否不起作用：o/

感谢任何可以提供帮助的人！

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

双向绑定有效，但发生在下一个周期。这就是为什么当你再次复制它时，会显示最后一个循环的值。这是因为 AngularJS 没有机会在设置值的行和调用回调的行之间运行其数据绑定。从这个意义上说，JavaScript 不允许干预，yet。

将scope.selectedItemChange(); 更改为$timeout(scope.selectedItemChange); 是一个简单的解决方法（不要忘记注入$timeout），方法是强制在下一个周期调用回调。

【讨论】：

好的！ :o) 正如您所指出的，将scope.selectedItemChange(); 更改为$timeout(scope.selectedItemChange); 似乎可以解决问题！另一个问题：链接函数是此代码的合适位置还是我应该在指令中使用控制器？非常感谢！
链接功能来对地方了！如果存在耦合指令，例如 ngForm 和 ngModel 在 AngularJS 基础中，请使用共享指令控制器。

【解决方案2】：

我已经实现了类似的东西并解决了它略短的版本：

只需添加

scope.$watch();

之后

scope.selectedItem = key;

Angular 会自己解决如何以及做什么。

【讨论】：