AngularJs 链接功能和 Jquery 操作。代码似乎不起作用答案

【问题标题】：AngularJs link function and Jquery manipulation. Code doesn't seem to workAngularJs 链接功能和 Jquery 操作。代码似乎不起作用
【发布时间】：2017-01-19 17:42:46
【问题描述】：

我在一个指令中有一个登录模式，我正在尝试使用链接函数和 jquery 使其工作，但它似乎不起作用。

这是登录按钮

<button login-modal type="button" class="btn">Sign In</button>

这是登录模式视图的缩小版

<div id="loginModal" class="modal fade" role="dialog"></div>

这是登录指令

angular
    .module('app')
    .directive('loginModal', ['$scope', loginModalDirective]);


    function loginModalDirective($scope) {
    return {
        restrict: 'E',
        templateUrl: 'template/loginmodal.view.html',
        link: function(scope, elem, attr) {
            elem.on('click', function() {
                jQuery("#loginModal").modal();
            });
        }
    };
}

【问题讨论】：

您应该认真考虑使用 AngularJS 而不是 jQuery 来处理事件。例如，不要使用elem.on('click'，而是使用ng-click 指令。
这实际上是一个好主意，迈克，但我在我的网站上有一个部分，我将使用大量相同的模态，我认为这种方式可能会更好。我是 Angular 的新手，所以我什至可能是错的。
@S.Patel 这实际上是您应该使用 Angular 的一个原因。您可以像定义完整状态一样定义模态模板（包括视图和控制器），然后将其传递给需要调用它的实例的任何对象。我推荐Angular Bootstrap modal。
@HarrisWeinstein OMG！太棒了

标签： jquery angularjs angularjs-directive

【解决方案1】：

你有E的限制，这意味着元素。你的元素是button。你的指令没有被初始化。

使用A 作为属性，因为login-modal 是一个属性。

restrict: 'A'

另外（不是问题，只是浪费），你不使用$scope，也不需要注入指令。您已经在链接方法中获得了scope。

【讨论】：