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：

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

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

然而：这将是一个非常难看的黑客。我更愿意选择@ pankaj-parkar建议的ng-include解决方案

更改自定义指令的属性

2 个答案: