指令双向绑定答案

【问题标题】：Directive two way binding指令双向绑定
【发布时间】：2015-03-07 09:55:44
【问题描述】：

我对 AngularJS 比较陌生，并试图创建一个指令来添加一些按钮。我正在尝试从指令内部修改控制器范围，但我无法让它工作。这是我的应用程序的示例

app.controller('invoiceManagementController', ['$scope', function ($scope) {
    $scope.gridViewOptions = {
        isFilterShown: false,
        isCompact: false
    };
}]);

app.directive('buttons', function () {
    return {
        restrict: 'A',
        template: '<button type="button" data-button="search" title="Filter"><i class="glyphicon glyphicon-search"></i></button>',
        scope: {
            gridViewOptions: '='
        },
        transclude: true,
        link: function (scope, element, attr, ctrl, transclude) {
            element.find("button[data-button='search']").bind('click', function (evt) {
                // Set the property to the opposite value
                scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown

                transclude(scope.$parent, function (clone, scope) {
                    element.append(clone);
                });
            });
        }
    };
});

我的 HTML 如下所示

{{ gridViewOptions.isFilterShown }}
<div data-buttons="buttons" data-grid-view-options="gridViewOptions"></div>

指令中的范围确实发生了变化，但就像孤立的一样，我确实尝试使用范围属性和 transclude 进行支付，但我可能遗漏了一些东西，希望能在这里得到一些启发

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

当您在指令的链接函数内修改范围时，您正在修改指令的隔离范围（因为这是您设置的）。要修改父作用域，您可以将作用域分配放在 transclude 函数中：

transclude(scope.$parent, function (clone, scope) {
    // Set the property to the opposite value
    scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown
    element.append(clone);
});

【讨论】：

在 html 上我有 {{ gridViewOptions.isFilterShown }} 我想要 2 路数据绑定，这可能吗？我可以看到你的解决方案确实改变了父范围，这很好

【解决方案2】：

好的，经过今天的更多研究，终于找到了解决方案。不确定是否是最好的解决方案，但目前效果很好。

app.controller('invoiceManagementController', ['$scope', function ($scope) {
    $scope.gridViewOptions = {
        isFilterShown: false,
        isCompact: false
    };
}]);

app.directive('buttons', function () {
    return {
        restrict: 'A',
        template: '<button type="button" data-button="search" data-ng-class="gridViewOptions.isFilterShown ? \'active\' : ''" title="Filter"><i class="glyphicon glyphicon-search"></i></button>',
        scope: {
            gridViewOptions: '='
        },
        link: function (scope, element, attr, ctrl, transclude) {
            element.find("button[data-button='search']").bind('click', function (evt) {
                scope.$apply(function () {
                    // Set the property to the opposite value
                    scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown;
                });
            });
        }
    };
});

【讨论】：