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

问题描述

我是相当新的角度JS和我发现它陡峭的学习曲线，给我的感觉真的IM缺少点这里，但这里有云：

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:

我想一个指令从控制器添加到我的网页。所以我想，如果我的指示标记添加到页面中，该指令和相关的控制器/模板等它添加得到。阅读有关$编译方法后，我认为这将被用来该指令到新创建的标签绑定。这部分是下面注释掉，但有或没有这一点，我需要的单词登录出现及其控制器来控制它？

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?

我可以找到很多的网络上类似的例子，当指令标签是在加载时页面上，并能得到那些做工精细，所以这是什么使认为这是关系到$编译方法 - 什么我错过什么？

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

以上code也在这里： http://jsfiddle.net/d5n6L/7/

推荐答案

您真不该动态地添加元素到页面角。很多人，包括我自己，谁来自一个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.

不过，与棱角分明，逻辑真的应该全部在标记可见。这意味着什么？在你的情况，你应该有指令存在不管是什么，然后控制其与 NG-节目或 NG-隐藏或纳克级。

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.

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

So, something like this would be best:

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

然后你就可以用你的指令，因为你编程。

And then you can use your directive as you programmed.

请注意，您还可以定义一个内嵌控制器（分配依赖的数组，作为控制器属性的指令这些依赖的函数）。这令在同一个地方的所有相关code。

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

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