动态添加Angular指令

Question

我对角度JS很新,我发现它是一个陡峭的学习曲线,我觉得我真的错过了这里的重点但是这里有:

我想从控制器向我的页面添加一个指令.所以我想如果我将指令标签添加到页面,指令和相关的控制器/模板等都会添加它.在阅读了$ compile方法之后,我认为这将用于将此指令绑定到其新创建的标记.这部分在下面被注释掉了,但无论是否有这个,我需要登录这个词出现,它的控制器来控制它？

当加载时指针标记在页面上时,我可以在web上找到许多相似的例子,并且可以使它们正常工作,所以这就是认为它与$ compile方法有关 - 我错过了什么？

HTML:

<div ng-app="application" ng-controller="myController"></div>

JS:

var myApp = angular.module('application', []);

myApp.controller('myController', ['$scope', function($scope) {

        function showLoginDirective () {
            $scope.login = angular.element(document.createElement('login'));

            angular.element(document.body).append($scope.login);
        };

        showLoginDirective();
    }
]);

angular.module('directives', [])
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: 'LoginController',
            template: '<div>login</div>',
            link: function(scope, element, attrs) {
                //$compile(element.contents())(scope.$new);
                console.log('should I not have a div containing login controlled by loginController at this point?');
            }
        };
});

上面的代码也在这里:http://jsfiddle.net/d5n6L/7/

Answer 1

您不应该使用Angular动态地向页面添加元素.许多人,包括我自己,都来自jQuery背景,他们假设我们可以继续这种做法,只需在我们需要的时候将内容添加到页面中.

但是,使用Angular时,逻辑应该在标记中完全可见.那是什么意思？在您的情况下,无论如何都应该在那里使用指令,然后使用ng-show或ng-hide或控制其可见性ng-class.

所以,这样的事情是最好的:

<login ng-show="showLogin"></login>

然后你可以在编程时使用你的指令.

请注意,您还可以定义内联控制器(将依赖项数组和这些依赖项的函数指定为controller指令的属性).这使所有相关代码保持在同一个地方.

例如,

angular.module('directives', [])
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: ['$scope', function($scope) {

                function showLoginDirective () {
                    $scope.showLogin = true;

                };

                 showLoginDirective();
              }
            ],
            template: '<div>login</div>',
            link: function(scope, element, attrs) {
                //$compile(element.contents())(scope.$new);
                console.log('should i not have a div containing login controlled by loginController at this point?');
            }
        };
});