指令控制器中的數據綁定

Question

我有一組按鈕，這些按鈕在單擊時對項目列表進行排序：

<div ng-controller="MainCtrl">
    <sort-buttons target="filters.sort">
        <sort-button></sort-button>
        <sort-button></sort-button>
        <sort-button></sort-button>
    </sort-buttons>
</div>

我希望父指令通過target屬性將按鈕的結果保存到MainCtrl控制器上的$scope.filters.sort屬性中，但是如何才能實際保存到target屬性指向的位置？

這是我所擁有的：

app.directive('sortButtons', [function(){
    return {
        restrict: 'E',
        controller: function($scope, $element, $attrs) {                
            // this.foo() should save to target
            this.foo = function(){
                console.log('click');
            };
        }
    }
}]).directive('sortButton', ['Config', function(Config) {
    var basePath = Config.get().paths.base;

    return {
        restrict:    'AE',
        replace:     true,
        require:     '^sortButtons',
        scope:       {
            label:   '@',
            orderBy: '&'
        },
        templateUrl: basePath + 'js/fantasy/templates/sort-button.htm',
        link:        function(scope, elem, attrs, ctrl) {
            elem.on('click', function(){
                ctrl.foo();
            });
        }
    }
}]);

Answer 1

在attr.target上嘗試$eval

var data = $scope.$eval($attrs.target)

或者，如果您的數據是動態的，則可以$ attr

var data = [];
$scope.$watch($attrs.target, function(newValue, oldValue){
   data = newValue;
})

還要像下面那樣更正控制器注入，否則如果縮小源代碼會出現錯誤。

 controller: ['$scope','$element','$attrs', function($scope, $element, $attrs) {
        var data = $scope.$eval($attrs.target)

        this.foo = function(){
            console.log('click');
        };
    }]

Answer 2

我所要做的就是完全刪除target屬性，而是在$rootScope上廣播。

指示：

this.foo = function(){
    $rootScope.$broadcast('sortButtons', {
        predicate: 'foo',
        reverse:    false
    });
};

控制器：

$rootScope.$on('sortButtons', function(event, data){
    $scope.filters.sort = data;
});