Javascript 特定标记名的AngularJS指令_Javascript_Angularjs_Angularjs Directive

Javascript 特定标记名的AngularJS指令

javascript angularjs

Javascript 特定标记名的AngularJS指令,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,如何在AngularJS中强制指令的特定标记例如，我想创建一个只应用于标记的指令。如果用户将此指令放在上，我不希望该指令处于活动状态。如何操作？您可以在指令中将restrict属性设置为E restrict: 'E' 标记名称始终为指令名称示例 angular.module('myapp', []) .directive('myTag', function() { return { restrict: 'E', templateUrl: 'my-tag.

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

例如，我想创建一个只应用于

标记的指令。如果用户将此指令放在

上，我不希望该指令处于活动状态。如何操作？

您可以在指令中将

restrict

属性设置为

 restrict: 'E'

标记名称始终为

指令

名称

示例

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

      },
      link: function(scope, element, attr) {

      }
    };
  });

使用此指令的唯一方法是

<my-tag></mytag>

您有两个选项

#1使用您已有的工作指令并添加几行

代码：

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

指令（'myIMG'，函数（）{ 返回{ 限制：'E'， templateUrl:'img.html'，//基本上具有模板：“”，//在此处构建图像标记，该标记将替换指令所在的HTML 是的，范围：{ 路径：'=' }, 链接：功能（范围、元素、属性）{ } }; }); HTML

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

我建议您支持这两种方法，因为Angular并不局限于元素标记名。这似乎可以归结为您希望如何处理设计中的用户错误。用户应该只在img元素上使用您的指令，那么您想做什么呢当他们不遵循你的意图时，你会怎么做？如果您想优雅地处理错误并继续，那么插入他们的img并继续


var-app=angular.module（“app”，[]）；
应用指令（“imgTest”，函数（）{
变量链接=功能（范围、元素、属性）{
var-img；
if（elem.tagName！=“IMG”）{
img=document.createElement（“img”）；
setAttribute（“src”，attrs.src）；
元素附加（img）；
}
};
返回{
“链接”：链接
}
});
引导（文档，[“应用程序]）；

最简单的方法定义特定HTML标记的指令即使这个问题很久以前就被提出了，也没有一个答案可以在所需元素本身上创建指令。因此，这里有另一种可能的方法来定义一个角度指令，它将自身限制为

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属性定义在它上面。如果没有，它将优雅地退出，因为不应定向此图像。但如果其中任何一个定义在它上面，它就会做它自己的事情

最佳方法同一元素上的两个指令，带需求以下可能是实现这一点的最佳角度方法。它由两个指令组成。一个位于

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

指令，该指令限制同一元素上的图像元素，如果存在，则该指令将实际运行，否则它将产生运行时异常，因为它的要求不满足

通过这种方式，两个指令都将非常简单，没有任何特定的代码检查指令实际执行的特定条件。所有这些检查都已在Angular代码中完成，我们的指令（第二个/子指令）将仅在图像元素同时存在时执行。

您想要为您的指令设置自定义标记，对吗？@Sebastian:不。对不起，问题中有一个错误。现在它是固定的。为什么不让指令同时工作？当源元素不是图像时，可以插入img标记（假设它们为您的指令提供相关的数据属性），否则，如果源元素是图像，则直接对其进行操作。这不是我的意思。我的问题中有一个错误，我修正了它。我不建议您这样做，因为较旧的浏览器（更重要的是，爬虫程序）可能无法正确理解这是一个img，这可能会给您带来一些麻烦。对此，我喜欢的一个小调整是使用

if（元素[0]。标记名！=“a”）返回

而不是空的

else{}

语句。

restrict:“AC”

是否已导致指令作为元素不触发？还有一个问题是如何将其限制为特定的标记，我不知道这段代码如何做到这一点。如果我弄错了，请帮我澄清一下。@Aides:OP问他们如何将指令限制在

IMG

元素上，所以我没有为指令创建属性/类指令，而是编写了一个直接应用于图像元素的指令，检查是否存在特定的自定义属性，在这种情况下，它可以我们应该做它的工作。但我有一个错误。我已无效地将此指令限制为

AC

，而不是

。另外：我还添加了其他方法，这可能是最好的方法，因为它不必检查执行

AC

指令的任何条件。它将仅在

img

元素上运行。

<myIMG path=''></myIMG>

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

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
        }
    });

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