Angularjs 指令将指令添加为属性并动态绑定它们 [英] Angularjs directive add directives as attribute and bind them dynamically
问题描述
我正在处理指令，我需要在其中编辑 DOM 添加 ng-src 属性和模型.
这是我的 DOM
<img src="images/logo.png" title="Hearty Wear"/></edit-component> 我需要结果 DOM
`<img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}}/>`
这样，当我用数据更新 myModel 时，图像应该更新
更新
sam.directive('editComponent', function() {返回 {限制:'EA'，转置:真实，替换:真的，templateUrl: "imageTemplate.html",链接:函数(范围、元素、attb、ctrl、transclude){范围.数据 = 函数(){无功图像数据；图像数据 = 参数 [5];scope.imageModel = imagedata.base64;return element.find('img').attr('src', "data:image/png;base64," + imagedata.base64);};}};});
我还需要先前的 src 属性值来显示现有图像.
现在我正在手动更新 src 属性.我需要可以通过 model 变量更新的解决方案
谢谢
经过长时间阅读各种博客和网站中有关 AngularJS 指令的文档.
我才知道指令的完整流程
流量来自
<块引用>Compile -> Controller -> preLink -> postLink or (Link)
如果你想在编译阶段
添加任何angular(ng-model, ng-style,ng-src)的核心指令var app;app = angular.module('App', []);app.directive('myDirective', ['$compile', function($compile) {//关键部分返回 {范围:真实，编译:函数(元素，属性){element.attr('ng-src', '{{imageModel}}');element.attr('ng-click', 'updateImage()');element.removeAttr('我的指令');//关键部分返回 {前:功能(范围，ele，attb){}，后:功能(范围，ele，attb){$compile(ele)(scope);返回范围.updateImage = function() {return scope.imageModel = "http://www.google.com/logos/doodles/2015/halet-cambels-99th-birthday-6544342839721984-hp2x.png";};}};},控制器:函数($scope，$element，$attrs){返回 $scope.imageModel = null;}};}]);<头><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><meta charset="utf-8"><title>JS Bin</title><风格>图像{最大宽度:100%；}</风格><body ng-app='应用程序'><img src="https://www.google.co.in/images/srpr/logo11w.png" alt=""my-directive></html>我将解释其中涉及的必要步骤.
第一阶段(编译):-
通过
在这个阶段添加你想要的核心角度指令或自定义指令 element.attr('ng-src', '{{imageModel}}');//用于动态图片 url 更改element.attr('ng-click', 'updateImage()');//更新图片的触发器element.removeAttr('我的指令');//**关键步骤请删除您的自定义指令属性**如果您在 $compile() 期间不删除自定义指令，它将无限次循环
第二阶段(控制器):-
定义您在这些阶段所需的所有模型和功能(我知道我已经在 postLink 中定义了 updateImage() .它也有效！)
$scope.imageModel = null//初始化
第三阶段(链接):-顺序是先是 preLink ，然后是 postLink .我没有在预链接中定义任何东西.
postLink :- $compile(element)(scope).这实际上将绑定编译元素中涉及的所有指令，并动态绑定它们.(vola).一切都按预期工作.
谢谢.如果您觉得我遗漏了一些要点或误解了概念，请随时更新.
JSBin 链接 https://jsbin.com/parote/edit?html,js,输出
Hi i am working on directive where i need to edit DOM add ng-src attribute and a model to it.
This is my DOM
<edit-component>
<img src="images/logo.png" title="Hearty Wear" />
</edit-component>
I need the result DOM be
`<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
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.
Right now im updating the src attribute manually.I need solution where i can update via model variable
Thanks
After a long reading of documentation about AngularJS Directives in various blogs and sites.
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
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
Second phase (Controller):-
Define all your models needed and function in these phase (I know i have defined updateImage() in postLink . It also works!)
$scope.imageModel = null // Initialization
Third phase (link) :- The order is first preLink and then postLink . I haven't defined anything in the prelink.
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
这篇关于Angularjs 指令将指令添加为属性并动态绑定它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
