javascript - 如何将现有属性及其值替换为自定义指令并在指令中调用函数

Question

我正在使用图像后备并为其创建了一个工厂，

Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('myCtrl', myCtrl);

    /* @ngInject */
    function myCtrl(GetInitials) {

        var vm = this;

        vm.getInitials = function(name){
            return GetInitials.getInitials(name);
        };

    }
})();

在 HTML 中，我使用图像后备作为

<img class="md-avatar" fallback-src="{{vm.getInitials(user.name)}}" ng-src="/assets/images/other/random.jpg"/>

工厂

(function() {
    'use strict';

    angular
        .module('app')
        .factory('GetInitials', Service);

    /* @ngInject */
    function Service() {

        var getInitials = function(name) {

            var nameArray = name.split(" ");

            if(nameArray.length > 1){
                name = {
                        first : nameArray[0],
                        last : nameArray[1]
                       };
            } else {
                name = {
                    first : nameArray[0].charAt(0),
                    last : nameArray[0].charAt(1)
                };
            }

            var canvas = document.createElement('canvas');
            canvas.style.display = 'none';
            canvas.width = '45';
            canvas.height = '45';
            document.body.appendChild(canvas);
            var context = canvas.getContext('2d');
            context.fillStyle = "dodgerblue";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.font = "20px Roboto, 'Helvetica Neue, sans-serif";
            context.fillStyle = "#fff";
            var first, last;
            if (name && name.first && name.first != '') {
                first = name.first[0];
                last = name.last && name.last != '' ? name.last[0] : null;
                if (last) {
                    var initials = first + last;
                    context.fillText(initials.toUpperCase(), 10, 30);
                } else {
                    var initials = first;
                    context.fillText(initials.toUpperCase(), 20, 33);
                }
                var data = canvas.toDataURL();
                document.body.removeChild(canvas);
                return data;
            } else {
                return false;
            }
        };
        return {
            getInitials: getInitials
        };
    }
})();

相反，我想为其创建一个指令，以免在每个 Controller 中调用工厂并在全局范围内使用指令。我试图做一些分数，调用该函数，但它总是抛出错误，我很困惑如何使用指令将 image-fallback-initials my-user="User Name" 替换为原始值fallback-src="{{vm.getInitials(user.name)}}"

   <img class="md-avatar" image-fallback-initials my-user="User Name" ng-src="/assets/images/other/easde.jpg"/>

相同的指令

   (function () {
    'use strict';

    angular
        .module('app')
        .directive('imageFallbackInitials', imageFallbackInitials);

    /* @ngInject */
    function imageFallbackInitials() {

        return {
            restrict : "A",
            priority: 200,
            controller: function($scope) {
                // bind myVar property to scope
                $scope.getInitials = function(name) {

                    var nameArray = name.split(" ");

                    if(nameArray.length > 1){
                        name = {
                            first : nameArray[0],
                            last : nameArray[1]
                        };
                    } else {
                        name = {
                            first : nameArray[0].charAt(0),
                            last : nameArray[0].charAt(1)
                        };
                    }

                    var canvas = document.createElement('canvas');
                    canvas.style.display = 'none';
                    canvas.width = '45';
                    canvas.height = '45';
                    document.body.appendChild(canvas);
                    var context = canvas.getContext('2d');
                    context.fillStyle = "dodgerblue";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.font = "20px Roboto, 'Helvetica Neue, sans-serif";
                    context.fillStyle = "#fff";
                    var first, last;
                    if (name && name.first && name.first != '') {
                        first = name.first[0];
                        last = name.last && name.last != '' ? name.last[0] : null;
                        if (last) {
                            var initials = first + last;
                            context.fillText(initials.toUpperCase(), 10, 30);
                        } else {
                            var initials = first;
                            context.fillText(initials.toUpperCase(), 20, 33);
                        }
                        var data = canvas.toDataURL();
                        document.body.removeChild(canvas);
                        return data;
                    } else {
                        return false;
                    }
                };
            },
            link : function(scope,elements,attrs){

               attrs.$set('fallback-src', scope.getInitials(attrs.myUser));
            }
        }
    }
})();

已编辑:更新指令并且工作正常。

这里我得到了fallback-src，但是它没有显示姓名缩写，

进行控制台检查

这里我得到了ng-src，fallback-src，然后是src

使用工厂时，顺序是fallback-src ng-src，然后是src

因此，fallback-src 正在更新，但它没有更新 src，并且 src 仍然是旧的

Answer 1

您不匹配link函数参数的顺序。传递给指令 link 函数的参数是 scope、elements 和 attrs，因此链接函数应该是

link : function(scope,elements,attrs){
    console.log(attrs.myUser);
}

如果你想在范围内注册观察者，你应该在指令定义中使用scope选项

return {
    restrict : "A",
    scope: {
        myUser: '@'
    },
    link : function(scope,elements,attrs){
        console.log(scope.myUser);
    }
}