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指令添加指令作为属性，并动态地绑定它们

回答

相关问题