等待加载angularjs指令模板

我想要做的是推迟加载角度js模板的指令，直到我真的需要它。我甚至可能根本不需要它。有没有办法，我可以只加载模板的指令，如果我需要它。服务是否可以做到这一点？我的应用程序已经加载了很多指令模板，我想避免加载太多东西，除非我需要它。手头的确切问题是加载登录表单的模板。如果用户点击某个按钮并且他/她没有登录，我想slideOpen（使用jQuery）登录表单。等待加载angularjs指令模板

来源

2013-02-15 Edgar Martinez

它可以完成，但它需要一点工作。指令模板通常*非常小，我无法想象登录表单是微乎其微的。你为什么想要异步加载？ – 2013-02-16 06:32:40

只是想知道是否有这样做的好方法。我同意登录表格很小，但我在想，如果这件事很容易做到的话，我会尽力去做。我应该补充一点，我并不害怕这些困难的事情，所以如果有这样做的方式我想知道，因为这会增加我对角度的总体理解。 – 2013-02-16 16:25:53

在绝大多数情况下，动态加载静态指令模板没有任何价值。它们太小以至于无法做到这一点。但是，这是可能的。但是，大多数情况下，该策略用于动态模板。

它需要$http来获取模板和$compile将其连接到AngularJS。

app.directive('testDirective', function($http,$compile) { 
    return { 
    scope: { show: '&' }, 
    link: function(scope, element, attrs) { 
     var tpl, 
      url = 'testDirective.tpl.html'; 

     scope.$watch('show()', function (show) { 
     if (show) { 
      showTheDirective(); 
     } 
     }); 

     function showTheDirective() { 
     if (!tpl) { 
      $http.get(url).then(function (response) { 
      tpl = $compile(response.data)(scope); 
      element.append(tpl); 
      }); 
     } 
     } 
    } 
    }; 
});

这里是一个Plunker演示它的工作原理。

来源

2013-02-16 18:37:13

为什么不试试，ng-if上的指令。

<your-directive ng-if='userLoggedIn'></your-directive>

，并在控制器

app.controller('yourCtrl', function($scope, service){ 
    $scope.dataHasLoaded = false; 

    service.yourUserLoginFuntion(params).then(function (data) { 
     //your login api 
     $scope.userLoggedIn = true 
    }); 
});

只有当你需要的指令来加载范围变量userLoggedIn是真实的。

来源

2016-11-24 06:59:42

等待加载angularjs指令模板

回答

相关问题