Изменить атрибут пользовательской директивы

Question

У меня есть пользовательские директивы для загрузки страниц внутри DIV

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

вот дом представление пользовательской директивы

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

Здесь я хочу, чтобы изменить номер страницы из контроллер.

Директива отлично работает, если значение добавляется непосредственно

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

Answer 1

Как вы хотите интерполированное значение pageNo внутри вашей директивы, Вы не можете получить это значение внутри функции templateUrl. Вам нужно использовать директиву ng-include, чтобы получить значение имени области внутри вашей директивы.

Markup

<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').

Однако: Это было бы очень уродливым взломом. Я предпочел бы выбрать решение с ng-include, предложенным @ pankaj-parkar