Я хотел бы создать настраиваемую директиву, к которой я могу передать объект (созданный "на лету") с интерполированными значениями.
Пример:
Новый массив в качестве параметра:
{userName: vm.data.name}
vm.data.name следует заменить данными контроллера.
Вот мой код:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom directive</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script>
(function(angular) {
'use strict';
angular.module('testDirectiveApp', [])
.controller('testController', ['$scope', function($scope) {
var data = {
name: 'ABC'
}
var vm = this;
vm.data = data;
}])
.directive('customDirective', ['$interpolate', function($interpolate) {
return {
scope: {
customParam: '='
},
link: function(scope, element, attributes){
scope.$watch('customParam', function() {
console.log(attributes.customParam, $interpolate(attributes.customParam)(scope), scope.$eval(attributes.customParam));
});
}
};
}]);
})(window.angular);
</script>
</head>
<body ng-app="testDirectiveApp">
<div ng-controller="testController as vm">
Name: <input ng-model="vm.data.name"> <hr/>
<div custom-directive custom-param="{userName: vm.data.name}"></div>
<p>{{vm.data.name}}</p>
</div>
</body>
</html>
Это выполнимо? Что я делаю неправильно?
С наилучшими пожеланиями,
Проблема в том, что вы пытаетесь получить доступ к переменной области с объектом attributes
, а не к объекту scope
.
В своей директиве измените attributes.customParam
на scope.customParam