AngularJS指令将指令添加为属性并动态绑定它们
[英]Angularjs directive add directives as attribute and bind them dynamically
问题描述
Hi i am working on directive where i need to edit DOM add ng-src attribute and a model to it. 
嗨，我正在研究需要编辑DOM的指令，添加ng-src属性和一个模型。
This is my DOM 这是我的DOM
<edit-component>
<img src="images/logo.png" title="Hearty Wear" />
</edit-component>
I need the result DOM be 我需要结果DOM是
`<div>
<img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} />
</div> `
Such that when i update myModel with data the image should be updated 这样当我用数据更新myModel时应该更新图像
UPDATE 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); }; } }; });
I need the previous src attribute value also to display the existing image. 我还需要先前的src属性值来显示现有图像。
Right now im updating the src attribute manually.I need solution where i can update via model variable 现在我手动更新src属性。我需要可以通过模型变量更新的解决方案
Thanks 谢谢
2 个解决方案
解决方案1
4 已采纳 2015-08-28 06:38:21
After a long reading of documentation about AngularJS Directives in various blogs and sites. 在各种博客和网站上长期阅读有关AngularJS指令的文档后。
I just came to know complete flow of directives 我才刚知道指令的完整流程
The flow will be from 流量将来自
Compile -> Controller -> preLink -> postLink or (Link)
If you want add any core Directives of angular(ng-model, ng-style,ng-src) at Compile Phase 如果要在编译阶段添加angular（ng-model，ng-style，ng-src）的任何核心指令
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>
I will explain the necessary steps involved in it . 我将解释其中涉及的必要步骤。
First phase (Compile) :- 第一阶段（编译）：-
Add the core angular directives or custom directives you want in this phase by 通过以下方式添加您在此阶段所需的核心角度指令或自定义指令
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**
If you dont remove your Custom directive during $compile() it will loop infinite times 如果您在$ compile（）期间不删除Custom指令，它将循环无限次
Second phase (Controller):- 第二阶段（控制器）：-
Define all your models needed and function in these phase (I know i have defined updateImage() in postLink . It also works!) 定义所有需要的模型并在这些阶段中起作用（我知道我已经在postLink中定义了updateImage（）。它也可以工作！）
$scope.imageModel = null // Initialization $ scope.imageModel = null //初始化
Third phase (link) :- The order is first preLink and then postLink . 第三阶段（链接）：-顺序是先preLink，然后是postLink。 I haven't defined anything in the prelink. 我尚未在预链接中定义任何内容。
postLink :- $compile(element)(scope) . postLink：- $ compile（element）（scope） 。 This will actually bind compile all the directives involved in the element and it binds them dynamically.(vola). 这实际上将绑定编译元素中涉及的所有指令，并动态绑定它们。 Everything works as desired. 一切都按要求工作。
Thanks. 谢谢。 If you feel i have missed some points or misunderstood the concept, feel free to update it. 如果您觉得我错过了一些要点或对该概念有误解，请随时进行更新。
JSBin link https://jsbin.com/parote/edit?html,js,output JSBin链接https://jsbin.com/parote/edit?html,js，输出
解决方案2
1 2015-08-25 12:22:16
Try 尝试
<img ng-if="!myModel" src="images/logo.png" title="Hearty Wear"/>
<img ng-if="myModel" src="{{ myModel }}" title="Hearty Wear"/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.