修改自定义指令的属性

Change attribute of custom directive

本文关键字：属性 指令 自定义 修改      更新时间：2023-09-26

我有一个自定义指令来加载div内的页面

.directive('page', function () {
    return {
        templateUrl: function (elem, attr) {
            return 'pages/page-' + attr.num + '.html';
        }
    };
});

下面是自定义指令

的dom表示。
<div page num="{{pageNo}}"></div>

这里我想从控制器更改页码。

指令可以正常工作，如果直接添加值

<div page num="1"></div>

当你想在指令中插入pageNo的值时，你不能在templateUrl函数中获得该值。你需要使用ng-include指令在你的指令中获得作用域名称的值。

标记 

<div page num="{{pageNo}}"></div>


app.directive('page', function() {
  return {
    scope: {
      num: '@'
    },
    template: '<div ng-include="''pages/page-''+ num + ''.html''"></div>'
  };
});
工作Plunkr

From the docs:

您目前无法从templateUrl函数访问作用域变量，因为模板是在作用域初始化之前请求的。

这意味着您只能访问属性的文字值，而不能针对特定范围对其求值。你可以在闭包中定义你的指令，并以这种方式访问父作用域。然后调用scope.$eval('pageNo')。

然而:这将是一个非常丑陋的hack。我宁愿选择@pankaj-parkar建议的ng-include解决方案

相关文章：