AngularJS: как динамически добавлять функцию к добавленному элементу html в директиве
Я создал директиву для обработки всех ссылок в моем веб-приложении. Я успешно сгенерировал разные объекты ссылок в зависимости от того, какую роль имеет зарегистрированный пользователь. Следующий код работает, за исключением случаев, когда я пытаюсь добавить функциональность для 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() не срабатывают. Что я делаю не так?
Попробуйте поместить функцию 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.
Надеюсь это поможет.
Насколько я понял, вы пытаетесь отобразить кнопку, имеет ли пользователь требуемую роль, чтобы увидеть или использовать кнопку. Это не очень хорошо с тем, что вы пытаетесь сделать.
Подход заключается в следующем: добавьте область, в которой хранится роль для пользователя, затем внутри контроллера ее оценивают (если пользователь может видеть кнопку). Затем используйте 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>
