Параметр функции Angular Scope возвращает неопределенное значение

Я вызываю функцию контроллера из директивы, но параметр функции возвращает неопределенное значение, когда я использую console.log для проверки значения. Интересно, что я делаю неправильно или, может быть, шаг, который я забыл. На самом деле я жестко закодировал значение, чтобы увидеть, отображается ли оно, но только в консоли становится неопределенным. ПРИМЕЧАНИЕ. Шаблон пользовательской директивы поступает из внешнего файла, поэтому параметр функции не передается в контроллер. Это работает только в том случае, если элемент пользовательской директивы имеет прикрепленное значение. Должен работать с внутренней директивой html.

//********************  Directive  ********************//
app.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<div>Get product<button ng-click="addToCart(56)">Add to Cart</button></div>",
    scope:      {    
      addToCart:"&"
    },
    link: function(scope, el, attrs) {

    }
  };  
}]);



//********************  Controller  ********************// 
app.controller('mycontroller', function($scope) {

 $scope.addToCart = function(thumbProductId){
     $scope.thumbProductId = thumbProductId;
     console.log("thumbProductId =" + $scope.thumbProductId); // Returns Undefined

    };
});



//********************  Html  ********************//
<html>
     <div ng-controller="mycontroller">
        <custom-dir add-to-cart="addToCart(thumbProductId)">  </custom-dir>

     </div>
  </html>

person icode    schedule 24.08.2016    source источник
comment
проверьте значение thumbProductId во время выполнения с помощью инструментов отладки Chrome. Или просто выйдите из системы thumbProductId, который передается в   -  person James Considine    schedule 24.08.2016
comment
Эта проблема заключается в том, что внешний шаблон директивы не возвращает данные. Если я помещаю значение в элемент пользовательской директивы, он работает, но внутри html не работает.   -  person icode    schedule 24.08.2016
comment
Работаю сейчас! Это то, что мне нужно. stackoverflow.com/questions/13318726/   -  person icode    schedule 24.08.2016


Ответы (2)


В коде было несколько неправильных вещей, первая из которых заключалась в том, что «customdir» не имел «-» между ними, так как там нет заглавной буквы. Вам также необходимо экранировать определенные символы в вашем html, такие как кавычки и косая черта. Вот plunkr вашего примера:

http://plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview

И директива теперь выглядит:

myApp.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<button ng-click=\"addToCart(thumbProductId)\">Add to Cart<\/button>",
    scope:      {    
      addToCart: "&"
    }
  };  
}]);
person cullimorer    schedule 24.08.2016
comment
Да, демо работает нормально. Я все еще получаю неопределенность. Шаблон на самом деле исходит из внешнего файла, поэтому я не могу использовать косые черты в html. Я предполагаю, что, возможно, причина, по которой я становлюсь неопределенной. - person icode; 24.08.2016
comment
Когда я помещаю значение в элемент директивы, как у вас, это работает, но что, если у вас есть html-код внутри директивы, которому нужно получить доступ к значению? Мне нужно получить данные внутри директивы и вернуться обратно в контроллер. - person icode; 24.08.2016
comment
Вы имеете в виду вот так? Теперь я передаю значение из текстового поля в директиву, устанавливаю его значение в контроллере, а затем отображаю его на HTML-странице: plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview - person cullimorer; 24.08.2016
comment
Не таким образом. Директива может использовать внешний html-файл. В этом файле будут данные. Я хотел бы использовать функцию для получения данных из внешнего html. Шаблон html не настраивается в директиве, он просто вызывает файл getmydirectivetemplate.html. - person icode; 24.08.2016
comment
Вы можете передать шаблон html в свойство templateUrl в директиве. Принцип использования переменных в файле HTML такой же, как и в шаблоне, который мы только что использовали. Вы спрашиваете, как динамически добавлять шаблоны в директивы? Если да, вот пример того, как кто-то делает именно это: stackoverflow.com/a/37782407/5349719 - person cullimorer; 24.08.2016
comment
Нет. Значение находится внутри html директивы. Как это показать в контроллере. - person icode; 24.08.2016
comment
Заработало!!! Это то, что мне нужно. stackoverflow.com/questions/13318726/…. Спасибо за всю вашу помощь, определенно изучите некоторые другие угловые навыки. - person icode; 24.08.2016

Предоставление локальных значений родительской области с привязкой выражения директивы

Чтобы использовать привязку выражения для передачи данных из области директивы в родительскую область, вызовите выражение с объектом locals.

myApp.directive('customdir', function() {
  return {
    restrict:   "E",
    template : "<button ng-click='addToCart({$id: 56})'>Add 56 to Cart</button>",
    scope:      {    
      addToCart: "&"
    }
  };  
});

Приведенная выше директива вызывает выражение Angular, определенное атрибутом add-to-cart со значением 56, представленным как $id.

HTML:

<div ng-controller="mycontroller">

    <customdir add-to-cart="thumbProductId =  $id">  </customdir>
    ThumbProductId => {{thumbProductId}}

</div>

Когда пользователь нажимает кнопку в элементе customdir, вызываемое Angular Expression устанавливает thumbProductId в значение, предоставленное $id, которое в данном случае равно 56.

Чтобы вызвать родительскую функцию с local, просто сделайте выражение Angular функцией:

 <customdir add-to-cart="parentFn($id)">  </customdir>

ДЕМО на PLNKR.

person georgeawg    schedule 24.08.2016