如何在templateUrl HTML内容中访问angular指令的属性

苏南

如何访问templateUrl html内容中的angular指令的属性?

angular.module('myApp')
    .directive('questionImage', function () {
        return {
            restrict : 'E',
            scope : false,
            templateUrl : 'templates/questionImage.html',
            link : function(scope, element, attrs) {
                scope.type = attrs['type'];
            }
        }
    });

模板HTML:

<div>
    <label>Image Links</label><br>
    <button type="button" ng-click="newImageLink('{{type}}')">+</button>
    <span ng-repeat="imageLink in questionFormData.imageUrls['{{type}}'] track by $index">
        <input type="text" ng-model="questionFormData.imageUrls['{{type}}'][$index]">
        <button type="button" ng-click="removeElement(questionFormData.imageUrls['{{type}}'], $index)">-</button>
    </span>
</div>

在此HTML内,我需要访问在DOM中使用指令时指定的“类型”属性值,如下所示。

<question-image type="optionAImages"></question-image>
<question-image type="optionBImages"></question-image>  

如何在模板html中获取“类型”属性值?

更新:在指令定义中添加了“链接”功能。我能够获取类型,但其值始终是最后一个指令用法。即我总是看到属性的optionBImagestypeoptionAImages值不可用。

莫斯塔法·艾哈迈德(Mostafa Ahmed)

问题来自scope:false语句,因为问题图像指令的第二次调用覆盖了由相同参数的第一次调用更改的参数

您需要将其更改scope:falsescope:true

这不会创建隔离的作用域,但会为指令赋予控制器父作用域的嵌套作用域。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从Angular属性指令中访问元素HTML?

来自分类Dev

如何在指令中从templateUrl运行$ scope函数?

来自分类Dev

如何在指令中从templateUrl运行$ scope函数?

来自分类Dev

AngularJS-如何在我的指令中访问templateUrl内部定义的表单?

来自分类Dev

如何测试angular指令的templateUrl指向的HTML?

来自分类Dev

如何在Directive Link函数中为变量添加TemplateURL?

来自分类Dev

从angular指令中的templateURL访问ID

来自分类Dev

我应该如何在Angular ui-router中创建templateUrl属性的路径?

来自分类Dev

我应该如何在Angular ui-router中创建templateUrl属性的路径?

来自分类Dev

使用ng-src时如何在Angular指令中访问src属性

来自分类Dev

如何在Angular的$ routeProvider中将参数从GET传输到templateUrl中?

来自分类Dev

如何在Chutzpah的无头浏览器中使用templateUrl测试指令

来自分类Dev

我如何在templateURL中使用Angular JS使用Laravel局部视图

来自分类Dev

如何在Angular指令中访问dom元素

来自分类Dev

无法在 Angular 1.6 中访问 html templateUrl

来自分类Dev

如何在angular 2.0中创建拖动属性指令?

来自分类Dev

如何在Angular指令中侦听元素的属性更改?

来自分类Dev

在AngularJS指令templateUrl中访问attrs

来自分类Dev

如何在angularJs 1.5中将$ scope变量作为组件的templateUrl的一部分传递?

来自分类Dev

如何在指令中访问$ event?

来自分类Dev

express+angular,如何使用templateURL

来自分类Dev

在范围属性更改时更新指令的templateurl的内容绑定

来自分类Dev

如何在链接列表(HTML)中抓取属性的内容

来自分类Dev

如何在 HTML 输入的文件中访问文件的“隐藏”属性?

来自分类Dev

如何在指令中显示对象的属性?

来自分类Dev

如何在指令的attrs中监视属性

来自分类Dev

如何在AngularJS指令中绑定属性?

来自分类Dev

如何在指令的attrs中监视属性

来自分类Dev

您如何在Angular Js中的指令的链接部分中访问变量?

Related 相关文章

  1. 1

    如何从Angular属性指令中访问元素HTML?

  2. 2

    如何在指令中从templateUrl运行$ scope函数?

  3. 3

    如何在指令中从templateUrl运行$ scope函数?

  4. 4

    AngularJS-如何在我的指令中访问templateUrl内部定义的表单?

  5. 5

    如何测试angular指令的templateUrl指向的HTML?

  6. 6

    如何在Directive Link函数中为变量添加TemplateURL?

  7. 7

    从angular指令中的templateURL访问ID

  8. 8

    我应该如何在Angular ui-router中创建templateUrl属性的路径?

  9. 9

    我应该如何在Angular ui-router中创建templateUrl属性的路径?

  10. 10

    使用ng-src时如何在Angular指令中访问src属性

  11. 11

    如何在Angular的$ routeProvider中将参数从GET传输到templateUrl中?

  12. 12

    如何在Chutzpah的无头浏览器中使用templateUrl测试指令

  13. 13

    我如何在templateURL中使用Angular JS使用Laravel局部视图

  14. 14

    如何在Angular指令中访问dom元素

  15. 15

    无法在 Angular 1.6 中访问 html templateUrl

  16. 16

    如何在angular 2.0中创建拖动属性指令?

  17. 17

    如何在Angular指令中侦听元素的属性更改?

  18. 18

    在AngularJS指令templateUrl中访问attrs

  19. 19

    如何在angularJs 1.5中将$ scope变量作为组件的templateUrl的一部分传递?

  20. 20

    如何在指令中访问$ event?

  21. 21

    express+angular,如何使用templateURL

  22. 22

    在范围属性更改时更新指令的templateurl的内容绑定

  23. 23

    如何在链接列表(HTML)中抓取属性的内容

  24. 24

    如何在 HTML 输入的文件中访问文件的“隐藏”属性?

  25. 25

    如何在指令中显示对象的属性?

  26. 26

    如何在指令的attrs中监视属性

  27. 27

    如何在AngularJS指令中绑定属性?

  28. 28

    如何在指令的attrs中监视属性

  29. 29

    您如何在Angular Js中的指令的链接部分中访问变量?

热门标签

归档