动态添加 Angular 指令

我对 Angular JS 相当陌生，并且发现它的学习曲线很陡峭，我感觉我真的错过了这里的要点，但这里是：

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

当指令标签在加载时位于页面上时，我可以在网络上找到很多类似的示例，并且可以让它们正常工作，所以这就是让人认为它与 $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/ http://jsfiddle.net/d5n6L/7/

您实际上不应该使用 Angular 向页面动态添加元素。许多具有 jQuery 背景的人（包括我自己）都认为我们可以继续这种做法，只需根据需要将内容添加到页面即可。

然而，对于 Angular，逻辑实际上应该在标记中可见。这意味着什么？在您的情况下，无论如何您都应该有该指令，然后使用以下命令控制其可见性ng-show or ng-hide or ng-class.

所以，像这样的事情是最好的：

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

然后您可以按照您的编程使用您的指令。

请注意，您还可以定义内联控制器（分配依赖项数组和这些依赖项的函数作为controller您的指令的属性）。这将所有相关代码保留在同一位置。

E.g.,

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?');
            }
        };
});