Как получить доступ к переменным контроллера директивы в шаблоне директивы?

Необходимо использовать переменную (определенную внутри контроллера элемент директивы) в шаблоне элемент.Как получить доступ к переменным контроллера директивы в шаблоне директивы?

angular.module('home').directive('mediaTile', function(){ 
 
\t return { 
 
\t \t restrict: "AE", 
 
\t \t replace: 'true', 
 
\t \t scope: { 
 
\t \t \t media: '=', 
 
\t \t \t displayFilter: '=' 
 
\t \t }, 
 
\t \t controller: function($scope){ 
 
\t \t \t var vm = this; 
 
      vm.mediaImageActual = 'img/large-tiles.png';   } 
 
\t \t }, 
 
\t \t controllerAs: 'vm', 
 
\t \t template: \t '<div>' + 
 
\t \t \t \t \t '<img preload-image ng-src="{{vm.mediaImageActual}}">' + 
 
\t \t \t \t \t '</div>' 
 
\t }; 
 
});

<div media-tile display-filter="view.displayFilter" media="dataList.lists[0]"></div>

нг-Src не получает надлежащее значение vm.mediaImageActual то есть.

Я пробовал онлайн-решения, такие как this, но не смог решить проблему. Что не так?

источник

2016-12-29 shahidbits

Попробуйте установить bindToController: true в директиве.

Вы можете найти более подробную информацию here

Использование bindToController наряду с синтаксисом controllerAs, которая лечит контроллеры, как класса, как объекты, инстанцировании их конструкторам и позволяет нам пространство имен их, когда экземпляр

If вы используете angularJs1.6 или выше, вы можете использовать component вместо директивы, которая имеет все эти свойства, установленные по умолчанию

источник

2016-12-29 18:10:41 Developer

Пожалуйста, добавьте некоторое объяснение того, почему этот код помогает OP. Это поможет обеспечить ответ, о котором могут узнать будущие зрители. См. [Ответ] для получения дополнительной информации. –

@Developer: Спасибо :) но, к сожалению, я использую angularjs 1.3. – shahidbits

@shahidbits - в этом случае вы можете установить 'bindToController' в true в директиве – Developer

s cript.js

var app = angualr.module('app', []); 
app.directive('mediaTile', function(){ 
return { 
    restrict: "AE", 
    replace: 'true', 
    scope: { 
     media: '=', 
     displayFilter: '=' 
    }, 
    controller: function($scope){ 
     var vm = this; 
     vm.mediaImageActual = 'img/large-tiles.png'; 
    }, 
    controllerAs: 'vm', 
    template: '<div>{{vm.mediaImageActual}}"' + 
       '</div>' 
}; 
});

HTML

<!DOCTYPE html> 
<html data-ng-app="app"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
<div media-tile displayFilter="view.displayFilter" media="dataList.lists[0]"></div> 
</body> 

</html>

источник

2016-12-29 18:20:26

Спасибо, Чаран, да, вы правы, был дополнительный«} ». Возможно, это было добавлено при редактировании вопроса в инструменте переполнения стека. Фактическая проблема: я не могу получить доступ к переменным, указанным в контроллере директивы в шаблоне директивы. – shahidbits

Попробуйте без контроллера. Синтаксис –

Нет проблем с кодом. его просто отлично работает, но путь изображения может быть неправильным. Но я могу получить доступ к переменным. https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview просто найдите переменную вашей директивы в 'script.js' –

Как получить доступ к переменным контроллера директивы в шаблоне директивы?

ответ

Смежные вопросы