Angularjs指令将指令添加为属性并动态绑定它们答案

【问题标题】：Angularjs directive add directives as attribute and bind them dynamicallyAngularjs指令将指令添加为属性并动态绑定它们
【发布时间】：2015-08-25 12:12:53
【问题描述】：

您好，我正在处理需要编辑 DOM 的指令，向其中添加 ng-src 属性和模型。

这是我的 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 时，应该更新图像

更新

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 属性。我需要可以通过 model 变量更新的解决方案

谢谢

【问题讨论】：

发布您的指令代码。

标签： javascript angularjs angularjs-directive angular-ngmodel angularjs-ng-transclude

【解决方案1】：

在长期阅读各种博客和网站中有关 AngularJS 指令的文档之后。

我刚刚了解了完整的指令流程

流量将来自

编译 -> 控制器 -> preLink -> postLink or (Link)

如果您想在 编译阶段

添加任何 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>

我将解释其中涉及的必要步骤。

第一阶段（编译）：-

在这个阶段添加你想要的核心角度指令或自定义指令

    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**

如果您在 $compile() 期间不删除自定义指令，它将无限次循环

第二阶段（控制器）：-

在这些阶段定义所有需要的模型和功能（我知道我已经在 postLink 中定义了 updateImage() 。它也有效！）

$scope.imageModel = null // 初始化

第三阶段（链接）：- 顺序是先 preLink ，然后是 postLink 。我没有在预链接中定义任何内容。

postLink :- $compile(element)(scope)。这实际上将绑定编译元素中涉及的所有指令，并动态绑定它们。（vola）。一切都按预期工作。

谢谢。如果您觉得我遗漏了一些要点或误解了这个概念，请随时更新。

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：

我想你可能需要ng-src。