更改自定义指令的属性

Question

我有自定义指令在 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>

Answer 1

由于您希望在指令中插入 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>'
  };
});

Working Plunkr

Answer 2

来自the docs：

You do not currently have the ability to access scope variables from the templateUrl function, since the template is requested before the scope is initialized.

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

但是：这将是一个非常丑陋的 hack。我宁愿选择 @pankaj-parkar

建议的 ng-include 解决方案

更改自定义指令的属性

Change attribute of custom directive

javascript

angularjs

angularjs-directive

paging