Как связать функцию с угловой директивой, которая использует функцию ссылки для создания HTML

Я хочу связать функцию с угловой директивой. HTML создается с использованием функции ссылки вместо использования template или же templateUrl свойства директивы. Проблема в том, что функции не могут быть связаны в первом случае.

Вот мой HTML:

<html ng-app="test">

<body>

  <div ng-controller="testCtrl">
    <test-dir print="printValue(val)">

    </test-dir>
  </div>
</body>

</html>

Это мой файл скрипта:

// Code goes here

var testApp = angular.module('test', []);

testApp.controller('testCtrl', function($scope) {

  $scope.printValue = function(val) {
    alert(val);
  }

})

testApp.directive('testDir', function() {
  return {

    replace: true,
    restrict: 'E',
    scope: {
      print: '&' 
    } , 

    link : function(scope, element, attr){
      var template = "<button ng-click='print({val:\"Hello\"})'>Click</button>";
      element.append(template);
    }

  }

})

В этом примере функция printValue на контроллере не привязана к кнопке.

Я создал плункер для приведенного выше примера. Здесь

Если бы я использовал свойство шаблона директивы для создания HTML, тот же пример работал бы отлично.

Я создал еще один плункер для действующего примера, используя свойство шаблона. Здесь

Итак, мой вопрос: как я могу связать функцию в первом примере? Я должен создать HTML, используя функцию ссылки, потому что HTML должен создаваться динамически, это всего лишь упрощение реальной проблемы.

Источник

1 ответ

Решение

Вам нужно $compile Ваш HTML шаблон.

Добавьте это после вашего element.append() заявление:

$compile(element.contents())(scope);

Вот рабочая вилка вашего плнкр.

Для более подробной информации, проверьте документацию для $compile сервис в угловой.

Источник
Другие вопросы по тегам