指令控制器中的数据绑定

Question

I have a collection of buttons that sort a list of items when clicked:

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

I want the parent directive to save the results of the buttons to the $scope.filters.sort property on the MainCtrl controller via the target attribute, but how can I actually save to where the target attribute points to?

Here's what I have:

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

Try $eval on attr.target like

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

Or if your data is dynamic you can $watch the attr

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

Also correct your controller injection like below, else if you will get error if you minified your source code.

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

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

Answer 2

What I went with was removing the target attribute altogether, and instead broadcasting on the $rootScope .

Directive:

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

Controller:

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