Angularjs指令添加指令的属性和动态绑定他们 [英] Angularjs directive add directives as attribute and bind them dynamically

问题描述

你好我工作的指示，我需要编辑DOM添加NG-src属性和模型吧。

这是我的DOM

 ＆LT;编辑-成分＆gt;
      ＆LT; IMG SRC =图像/ logo.png称号=酣畅穿/＆GT;
    ＆LT; /编辑-成分＆gt;
 

我需要的结果是DOM

 `＆LT; D​​IV＆GT;
         ＆LT; IMG SRC =图像/ logo.png称号=酣畅穿NG-SRC = {{基于myModel}} /＆GT;
       ＆LT; / DIV＆GT; `
 

这样的，当我更新数据的图像应该更新基于myModel

更新

sam.directive（'editComponent'，函数（）{
    返回{
      限制：EA，
      transclude：真实，
      更换：真实，
      templateUrl：imageTemplate.html
      链接：功能（范围，元素，attB位，CTRL transclude）{
        scope.data =功能（）{
          VAR为imageData;
          的imageData =参数[5];
          scope.imageModel = imagedata.base64;
          返回element.find（'IMG'）ATTR。（SRC，数据：图像/ PNG; BASE64，+ imagedata.base64）;
        };
      }
    };
  }）;

我需要previous 的src 属性值也显示现有的形象。

现在即时更新的的src 属性manually.I需要的解决方案，我可以通过更新的模式变量

感谢

解决方案

文件约AngularJS指令在各种博客和网站长时间阅读后。

我刚刚才知道指令的完整流程

的流动将是从

  

编译 - >控制器 - > $ P $砰砰 - > postLink或（链接）

如果你想添加任何角（NG-模型，吴式，NG-SRC）是在核心指令的编译阶段

\r

\r

VAR应用;\r
\r
应用= angular.module（'应用'，[]）;\r
\r
app.directive（'myDirective'，[\r
  '$编译，函数（$编译）{//重要组成部分\r
    返回{\r
      适用范围：真，\r
      编译：功能（元素，ATTRS）{\r
        element.attr（'NG-SRC，{{imageModel}}'）;\r
        element.attr（'NG-点击'，'updateImage（）'）;\r
        element.removeAttr（我的指导性'）; //重要组成部分\r
        返回{\r
          pre：功能（范围，ELE，attB位）{}，\r
          岗位：功能（范围，ELE，attB位）{\r
            $编译（ELE）（范围）;\r
            返回scope.updateImage =功能（）{\r
              返回scope.imageModel =htt​​p://www.google.com/logos/doodles/2015/halet-cambels-99th-birthday-6544342839721984-hp2x.png;\r
            };\r
          }\r
        };\r
      }，\r
      控制器：函数（$范围，$元，$ ATTRS）{\r
        返回$ scope.imageModel = NULL;\r
      }\r
    };\r
  }\r
]）;

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
  ＆LT;间的charset =UTF-8＆GT;\r
  ＆LT;标题＆GT; JS斌＆LT; /标题＆GT;\r
  ＆LT;风格＆GT;\r
    IMG {\r
      最大宽度：100％;\r
      \r
    }\r
  ＆LT; /风格＆GT;\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用='应用'＆GT;\r
  ＆LT; IMG SRC =htt​​ps://www.google.co.in/images/srpr/logo11w.pngALT =我-指令＆GT;\r
\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r

\r

我将解释参与其中的必要步骤。

第一阶段（编译）： -

按

在这个阶段加入您想要核心角指令或自定义指令

  element.attr（'NG-SRC，{{imageModel}}'）; //对于动态图像的URL变化
    element.attr（'NG-点击'，'updateImage（）'）; //触发更新图像
    element.removeAttr（我的指导性'）; // **关键的一步，请删除自定义指令属性**
 

如果你不$编译过程中删除自定义指令（），它会循环无限次

第二阶段（控制器）： -

定义你所有需要的型号和功能在这些阶段（我知道我已经定义在postLink updateImage（），它也可以！）

$ scope.imageModel = NULL //初始化

第三阶段（链接）： -
顺序是先$ P $砰砰然后postLink。
我还没有定义在$ p $砰砰什么。

postLink： - $编译（元）（范围）。这实际上绑定编译所有参与元素的指示，并结合动态他们。（足底）。根据需要一切正常。

感谢。如果你觉得我已经错过了一些点或误解的概念，随时更新它。

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屋！