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

Question

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

0

Я хочу привязать функцию к угловой директиве. HTML создается с использованием функции link вместо использования свойств 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 на контроллере не привязана к кнопке.

Я создал plunker для приведенного выше примера здесь

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

Я создал еще один плункер для примера с использованием свойства template Here

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

Nader Hisham 20 апр. 2016, в 14:34

Источник

0

У вас есть опечатка в вашем коде. Изменить restict чтобы restrict
A.Sharma 20 апр. 2016, в 12:30
0

спасибо @A.SharmaA.Sharma я отредактировал код
Nader Hisham 20 апр. 2016, в 12:33

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

У вас есть опечатка в вашем коде. Изменить restict чтобы restrict
спасибо @A.SharmaA.Sharma я отредактировал код

iulian · Accepted Answer · 2016-04-20T10-39-00.000Z

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

Добавьте это после element.append():

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

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

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