AngularJS: как динамически добавлять функцию к добавленному элементу html в директиве

80
6

Я создал директиву для обработки всех ссылок в моем веб-приложении. Я успешно сгенерировал разные объекты ссылок в зависимости от того, какую роль имеет зарегистрированный пользователь. Следующий код работает, за исключением случаев, когда я пытаюсь добавить функциональность для ng-click в "htmlElement".

      $scope.test = test;
function test() {
console.log("test")
}

var htmlElement = "<li ng-click=\"test()"\"><a href=\"" +
link.href + "\" target=\"" +
link.target + "\">" +
link.title + "</a></li>";
element.append(htmlElement);
...
$compile(element)($scope);
element.append(element);

При ударе сгенерированного элемента ng-click и test() не срабатывают. Что я делаю не так?

спросил(а) 2016-01-26T18:23:00+03:00 4 года, 8 месяцев назад
1
Решение
57

Попробуйте поместить функцию test() в область действия директивы, например:

       $scope.test = function() {
console.log("test")
}

var htmlElement = "<li ng-click=\"test()"\"><a href=\"" +
link.href + "\" target=\"" +
link.target + "\">" +
link.title + "</a></li>";
element.append(htmlElement);

...

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

test() является частной функцией внутри функции директивной ссылки. Он недоступен для ng-click, поскольку он не находится в области $ scope.

Надеюсь это поможет.

ответил(а) 2016-01-26T18:32:00+03:00 4 года, 8 месяцев назад
40

Насколько я понял, вы пытаетесь отобразить кнопку, имеет ли пользователь требуемую роль, чтобы увидеть или использовать кнопку. Это не очень хорошо с тем, что вы пытаетесь сделать.

Подход заключается в следующем: добавьте область, в которой хранится роль для пользователя, затем внутри контроллера ее оценивают (если пользователь может видеть кнопку). Затем используйте ng-show внутри html, чтобы скрыть/просмотреть кнопку.

Пример: (внутри html)

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="userRole"></div>

Вместо div используйте вашу кнопку или что хотите...

(внутри вашего контроллера или скрипта)

<script>
if (user.Role == "Admin")
{
// this will show the button on the view
$scope.userRole = true
}
else
{
// this will hide the button from the view
$scope.userRole = false;
}
</script>

ответил(а) 2016-01-26T18:36:00+03:00 4 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема