AngularJS - как передать объект (созданный на лету) с интерполированными данными в пользовательскую директиву

0

Я хотел бы создать настраиваемую директиву, к которой я могу передать объект (созданный "на лету") с интерполированными значениями.

Пример:

Новый массив в качестве параметра:

{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>

Это выполнимо? Что я делаю неправильно?

С наилучшими пожеланиями,

Теги:
angularjs-scope
angularjs-service

1 ответ

1
Лучший ответ

Проблема в том, что вы пытаетесь получить доступ к переменной области с объектом attributes, а не к объекту scope.

В своей директиве измените attributes.customParam на scope.customParam

http://plnkr.co/edit/1o4746GamtIcwHekoKyl?p=info

Ещё вопросы

Сообщество Overcoder
Наверх
Меню