Angularjs指令添加指令作爲屬性，並動態地綁定它們

您好我正在處理指令，我需要編輯DOM添加ng-src屬性和模型。Angularjs指令添加指令作爲屬性，並動態地綁定它們

這是我的DOM

 <edit-component> 
     <img src="images/logo.png" title="Hearty Wear" /> 
    </edit-component>

我需要的結果DOM是

 `<div> 
     <img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} /> 
     </div> `

這樣的，當我更新數據基於myModel圖像應該更新

UPDATE

sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl: "imageTemplate.html", link: function(scope, element, attb, ctrl, transclude) { scope.data = function() { var imagedata; imagedata = arguments[5]; scope.imageModel = imagedata.base64; return element.find('img').attr('src', "data:image/png;base64," + imagedata.base64); }; } }; });

我需要先前的src屬性值也顯示現有圖像。

眼下即時更新SRC屬性需要manually.I解決方案，我可以通過模型更新變量

感謝

來源

2015-08-25 Amerrnath

發佈您的指令代碼。 – dfsq

文檔的閱讀長後關於各種博客和網站中的AngularJS指令。

我剛剛纔知道指令

的完整流程的流程將是

編譯 - >控制器 - >預鏈接 - > postLink或（鏈接）

如果您想要添加任何角度的核心指令（ng-model，ng-style，ng-src） at 編譯階段

var app; 
 

 
app = angular.module('App', []); 
 

 
app.directive('myDirective', [ 
 
    '$compile', function($compile) { // Crucial Part 
 
    return { 
 
     scope: true, 
 
     compile: function(element, attrs) { 
 
     element.attr('ng-src', '{{imageModel}}'); 
 
     element.attr('ng-click', 'updateImage()'); 
 
     element.removeAttr('my-directive'); // Crucial Part 
 
     return { 
 
      pre: function(scope, ele, attb) {}, 
 
      post: function(scope, ele, attb) { 
 
      $compile(ele)(scope); 
 
      return scope.updateImage = function() { 
 
       return scope.imageModel = "http://www.google.com/logos/doodles/2015/halet-cambels-99th-birthday-6544342839721984-hp2x.png"; 
 
      }; 
 
      } 
 
     }; 
 
     }, 
 
     controller: function($scope, $element, $attrs) { 
 
     return $scope.imageModel = null; 
 
     } 
 
    }; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
    img { 
 
     max-width: 100%; 
 
     
 
    } 
 
    </style> 
 
</head> 
 
<body ng-app='App'> 
 
    <img src="https://www.google.co.in/images/srpr/logo11w.png" alt="" my-directive> 
 

 
</body> 
 
</html>

我將解釋參與其中的必要步驟。

第一階段（編譯）： -

通過

element.attr('ng-src', '{{imageModel}}'); // For dynamic image url changes 
    element.attr('ng-click', 'updateImage()'); // The trigger to update image 
    element.removeAttr('my-directive'); // **Crucial step please remove your custom directive attribute**

添加您需要的核心角指令或自定義指令在這個階段如果你不$編譯過程中刪除自定義指令（）它會循環無限次

第二階段（控制器）： -

在這些階段定義你需要的所有模型和函數（我知道我已經在postLink中定義了updateImage（）。它也有效！）

$ scope.imageModel = NULL //初始化

第三階段（鏈接）： - 的順序是第一預鏈接，然後postLink。我還沒有定義任何預鏈接。

postlink： - $ compile（element）（scope）。這將實際綁定編譯元素中涉及的所有指令，並動態綁定它們（volatile）。一切按需要運作。

謝謝。如果您覺得我錯過了一些觀點或誤解了這個概念，請隨時更新它。

JSBin鏈接https://jsbin.com/parote/edit?html,js,output

來源

2015-08-28 06:38:21 Amerrnath

嘗試

<img ng-if="!myModel" src="images/logo.png" title="Hearty Wear"/> 
<img ng-if="myModel" src="{{ myModel }}" title="Hearty Wear"/>

來源

2015-08-25 12:22:16

我不想編輯我的src屬性。 – Amerrnath

我想你可能需要'ng-src'來代替。 – ryanyuyu

Angularjs指令添加指令作爲屬性，並動態地綁定它們

回答

相關問題