更改自定义指令的属性

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

工作中的Plunkr

Answer 2

来自文档：

您当前无法从 templateUrl 函数访问范围变量，因为在初始化范围之前请求模板。

这意味着您只能访问属性的字面值，并且无法针对特定范围对其进行评估。您也许可以在闭包内定义指令并以这种方式访问父作用域。然后你就可以打电话给

scope.$eval('pageNo')

。

然而：这将是一个非常丑陋的黑客行为。我宁愿选择 @pankaj-parkar

 建议的 

ng-include

解决方案