定制指令改变属性 [英] Change attribute of custom directive

问题描述

我有自定义指令来加载一个div内页

  .directive（页，函数（）{
    返回{
        templateUrl：功能（ELEM，ATTR）{
            回报页/页级'+ attr.num +'的.html';
        }
    };
}）;
 

这里是DOM重新自定义指令presentation

 ＆LT; D​​IV页NUM ={{帮您做生意}}＆GT;＆LT; / DIV＆GT;
 

在这里，我想从控制器来更改页码。

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

 ＆LT; D​​IV页NUM =1＆GT;＆LT; / DIV＆GT;
 

解决方案

当你想要帮您做生意你的指令内插值，你不能让里面的那个值 templateUrl 功能。您需要使用 NG-包括指令，让您的指令范围内名称的值。

标记

 ＆LT; D​​IV页NUM ={{帮您做生意}}＆GT;＆LT; / DIV＆GT;
 

code

  app.directive（页，函数（）{
  返回{
    范围： {
      NUM：'@'
    }，
    模板：'＆LT; D​​IV NG-包括=\\'。页/页 -  \\'+ NUM + \\'HTML \\'＆GT;＆LT; / DIV＆GT;'
  };
}）;
 

工作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屋！