最简单的方法

Question

如何在AngularJS中强制指令的特定标记？

例如，我想创建一个仅适用于<img>标签的指令。如果用户将此指令放在<div>上，我不希望该指令处于活动状态。我怎么能这样做？

Answer 1

您有2个选项。

＃1 使用您现有的指令并添加几行

代码：

link: function(scope,element,attr) {

    if (element[0].tagName== 'IMG') {
        //do your stuff
    } else {
        // do nothing or something else
    }
}

＃2 将您的指令限制为一个元素（如Fizer Khan的回答所示）。

.directive('myIMG', function() {
    return {
      restrict: 'E',
      templateUrl: 'img.html',//essentially has <img src=''>
      template: "<img src='scope.path'>",//build out your image tag here which will replace the HTML the directive is on
      transclude: true,
      scope: {
          path: '='
      },
      link: function(scope, element, attr) {

      }
    };
  });

HTML

<myIMG path=''></myIMG>

我个人最喜欢选项2。但我知道这可能更令人生畏，并经常引入其他意想不到的事情。

Answer 2

最简单的方法

定义特定HTML标记的指令

尽管很久以前就提出过这个问题但没有答案可以对所需的元素本身做出指示。这是另一种定义Angular指令的可行方法，该指令将自身限制为IMG标记

appModule
    .directive("img", function() {
        restrict: "E",
        link: function(scope, element, attributes) {
            if (!element.hasClass("something") && !attributes.something)
            {
                // just a normal image
                return;
            }

            // do your stuff
        }
    });

此代码定义IMG元素的指令，但在初始化时，它会检查是否有特定的CSS类和/或HTML属性。如果它没有任何内容，则会优雅地退出，因为此图像不应该定向。但是，如果其中任何一个被定义，它就会成功。

最佳方法

对具有要求

的同一元素的两个指令

以下可能是最好的Angular方法。 IT由两个指令组成。一个在img元素上，另一个是属性/类指令，需要img指令。

appModule
    .directive("img", function() {
        restrict: "E",
        controller: function imgController() {
            // does nothing really
        }
    })
    .directive("imgSpecific", function() {
        restrict: "AC",
        require: "img",
        link: function() {
            // do your stuff
        }
    });

所以第二个指令实际上需要一个img指令，该指令限制同一元素上的图像元素，如果存在，那么该指令实际上会运行，否则它将产生一个运行时异常，因为它的要求不是＆＃39见到了。

通过这种方式，两个指令都非常简单，没有任何特定的代码来检查指令实际执行的某些条件。所有这些检查都已经在Angular代码中完成，我们的指令（特别是第二个/子代）只会在两个都存在的情况下对图像元素执行。

Answer 3

您可以在指令

中将restrict属性设置为E

 restrict: 'E'

标记名称始终为directive名称。

示例

angular.module('myapp', []) .directive('myTag', function() { return { restrict: 'E', templateUrl: 'my-tag.html', scope: { }, link: function(scope, element, attr) { } }; });

只有使用此指令的方法是

<my-tag></mytag>

Answer 4

我建议您支持这两种方法，因为Angular不限制元素标记名称。它似乎归结为你想如何处理你的设计中的用户错误。用户应该只在img元素上使用你的指令，那么你想要什么什么时候他们不遵循你的意图？如果要优雅地处理错误并继续为他们插入一个img并继续进行。

http://plnkr.co/edit/RCS8uZgPFx2VgxQv73A4?p=preview

<html>

<head>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>

<img src="http://www.w3.org/html/logo/img/badge-samples.png" img-test>
<div data-src="http://www.w3.org/html/logo/img/badge-samples.png" img-test></div>
<script>

  var app=angular.module("app",[]);

  app.directive("imgTest",function(){
    var link=function(scope,elem,attrs){
      var img;
      if(elem.tagName !="IMG"){
        img=document.createElement("img");
        img.setAttribute("src",attrs.src);
        elem.append(img);
      }
    };

    return{
      "link" : link
    }
  });

  angular.bootstrap(document,["app"]);

</script>

针对特定标签名称的AngularJS指令

4 个答案:

最简单的方法

定义特定HTML标记的指令

最佳方法

对具有要求