动态添加 Angular 指令 [英] Dynamically adding Angular directives

问题描述

我对 Angular JS 还很陌生，我发现它的学习曲线很陡峭，我觉得我真的错过了这里的重点，但这里是:

I'm fairly new to angular JS and am finding it a steep learning curve, I get the feeling im really missing the point here but here goes:

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

I want to add a directive to my page from a controller. So I thought if I add the directive tag to the page, the directive and associated controller/template etc get added with it. After reading about the $compile method, I thought this would then be used to bind this directive to its newly created tag. This part is commented out below, but with or without this, I need the word login to appear and its controller to control it?

当指令标签在加载时在页面上时，我可以在网络上找到很多类似的例子，并且可以让它们正常工作，所以这就是认为它与 $compile 方法相关的原因 - 什么我失踪了吗?

I can find lots of examples of similar around the web when the directive tag is on the page at load time, and can get those to work fine, so this is whats making think it is related to the $compile method - what am I missing?

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/

推荐答案

您真的不应该使用 Angular 向页面动态添加元素.许多有 jQuery 背景的人，包括我自己，都认为我们可以继续这种做法，并根据需要向页面添加内容.

You shouldn't really be dynamically adding elements to the page with Angular. Many people, myself included, who come from a jQuery background, assume that we can continue with this practice and just add things to the page as we need them.

然而，对于 Angular，逻辑应该在标记中全部可见.这意味着什么?在您的情况下，无论如何您都应该拥有指令，然后使用 ng-show 或 ng-hide 或 ng-class.

However, with Angular, the logic should really all be visible in the markup. What does that mean? In your case, you should have the directive there no matter what, and then control its visibility with ng-show or ng-hide or ng-class.

所以，最好是这样的:

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

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

And then you can use your directive as you programmed.

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

Note that you can also define an inline controller (assign an array of dependencies and a function of those dependencies as the controller property of your directive). That keeps all related code in the same place.

例如，

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

这篇关于动态添加 Angular 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！