AngularJS:通过属性将动态数据传递到指令控制器

时间:2015-10-14 22:20:07

标签: angularjs

我知道将数据传递到指令有多种方法。这个问题是询问是否可以使用外部定义的控制器动态地将数据传递到指令而没有链接功能。让我们从有用的东西开始:

<stars stars-rating="{{someVM.property}}"></stars>

其中stars指令定义为:

angular.module('module-stars', [])
.directive('stars', function () {
return {
    restrict: 'E',
    replace: false,
    link: function (scope, element, attr) {
        var stars = parseFloat(attr.starsRating);

        try {
            scope.wholeStars = new Array(Math.floor(stars + .33));
            scope.emptyStars = new Array(Math.floor(5.33 - stars));
            scope.halfStars = 5 - scope.wholeStars.length - scope.emptyStars.length;
        } catch (e) {}
    },
    templateUrl: 'modules/stars/stars.tmpl.html'
};
});

这很好用,但这是一个非常大的应用程序,并且为了可维护性,我宁愿在整个应用程序中使用相同的模式。我的基本模式如下:

angular.module('module-stars', [])
.directive('stars', function () {
return {
    restrict: 'E',
    replace: false,
    templateUrl: 'modules/stars/stars.tmpl.html',
    controller: 'starsCtrl',
    controllerAs: 'stars'
};
});

控制器外部定义:

angular.module('module-stars')
.controller('starsCtrl', ['$attrs',
function ($attrs) {
    var vm = this;
    vm.id = 'starsCtrl';
    vm.text = commonService.getText('stars');

    var stars = parseFloat($attrs.starsRating);

    try {
        vm.wholeStars = new Array(Math.floor(stars + .33));
        vm.emptyStars = new Array(Math.floor(5.33 - stars));
        vm.halfStars = 5 - vm.wholeStars.length - vm.emptyStars.length;
    } catch (e) {}

}]);

如果我使用此模式,那么$ attrs.starsRating将是字符串“{{someVM.property}}”而不是someVM.property的值。任何建议,或者这只是Angular在这里工作的方式。

0 个答案:

没有答案