更改自定义指令的属性

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

工作朋克

Answer 2

从文档 ：

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

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

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