指令控制器中的数据绑定

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>

我希望parent指令通过$scope.filters.sort属性将按钮的结果保存到MainCtrl控制器上的target属性，但我怎样才能保存< / strong>到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

在$eval上尝试attr.target

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;
});