更改自定义指令的属性 [英] Change attribute of custom directive

问题描述

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

.directive('page', function () {返回 {templateUrl:函数(元素，属性){return 'pages/page-' + attr.num + '.html';}};});

这里是自定义指令的 dom 表示

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

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

解决方案

由于您希望指令中的 pageNo 的内插值，您无法在 templateUrl 功能.您需要使用 ng-include 指令来获取指令中范围名称的值.

标记

代码

app.directive('page', function() {返回 {范围: {编号:'@'},模板:'<div ng-include="\'pages/page-\'+ num + \'.html\'"></div>'};});

工作 Plunkr

I have custom directive to load pages inside a div

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

here is the dom representation of the custom directive

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

Here i want to change the page number from the controller.

Directive works fine if the value added directly

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

解决方案

As you want the interpolated value of pageNo inside your directive, You cant get that value inside the templateUrl function. You need to use ng-include directive to get the value of scope name inside your directive.

Markup

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

Code

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

Working Plunkr

这篇关于更改自定义指令的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！