如何取代現有的屬性及其值自定義指令，並在指令呼叫功能

Question

我使用的圖像回退，並提出了同樣的工廠，

控制器

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

相反，我想爲此創建一個指令，以免在每個控制器中調用工廠並在全局中使用指令。我試圖做出一些成績，被調用的函數及其總是拋出的錯誤，我很卡如何使用指令來取代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 and then src

隨着使用出廠序列是fallback-src ng-src and then 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); 
    } 
} 

Answer 2

對完整的解決方案致力於創建一個

指令圖像後備隨着名稱縮寫| AngularJs

完整的端到端的工作代碼是在這裏：

How to update the src with new fallback-src using the directive?

很少有更多的答案也被其他的是好去另一途徑提供。