使用指令时如何呈现模板答案

【问题标题】：How templates get rendered when using directives使用指令时如何呈现模板
【发布时间】：2016-03-20 08:40:15
【问题描述】：

每次我在一个新项目中工作时，我都会在许多项目中使用 AngularJs，我尝试使其更具可重用性和结构化，并将项目分成小组件（指令、提供程序、工厂和模板）

问题：在许多情况下，我需要运行一些 DOM 操作，但它不能按预期工作，因为 JS 函数在 DOM 准备好之前运行

示例

app.js

angular.module('App',['ngRoute']);

route.js

angular.module('App').config(function ($routeProvider) {
$routeProvider
    .when('/',{
        templateUrl:'templates/homeTemplate.html'
    })
    .when('/new',{
        templateUrl:'templates/brand/newTemplate.html'
    })
})

directive.js

 /*
 * AngularJs Directive: fcNew
 * Depencies:
 * Desc: load user widget template
 */
 angular.module('App').directive('fcNew',function($http){
   return{
    templateUrl:'templates/userWidgetTemplate.html',
    replace:true,
    link:function(scope,ele,attr){
        $http({
            method:'GET',
            url:"/user-side-bar"
        }).success(function (res) {
            scope.links= res;
        })
    }

   }
 })

userWidgetTemplate.html

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li ng-repeat="link in links">
                <a href="#">{{link}}</a>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->

newTemplate.html

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">
        <fc-new></fc-new>
    </div>
 </div>
</div>

index.html

<!DOCTYPE html>
<html ng-app="FansCoupon">
<head>
    <title>Laravel</title>

    <link rel="stylesheet" href="css/styles.css"/>

</head>

<body>

<nav class="navbar navbar-default fc-navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

    <div ng-view></div>

    <script src="js/scripts.js"></script>
</body>
</html>

现在，当我导航到 #/new 时，只有索引中的折叠菜单（ng-view 外部）工作，但当我尝试记录选择器 .dropdown-toggle 时，指令模板内的折叠不起作用@ 只找到一个元素这意味着当函数被调用时 DOM 还没有准备好

如果可能的话，我需要了解指令如何呈现模板，以及何时或换句话说，我可以将我的代码放在哪里，以使用指令模板来操作动态创建的 DOM？

注意：我使用的是boostrapJs without jQuery，效果很好，但没有使用指令模板

注意：我正在使用 gulp 任务运行器将所有文件合并到一个名为 scripts.js 的文件中

图片中的问题

红色菜单（在 ng 视图之外）正在折叠
白色的菜单（从指令模板呈现）不起作用

很抱歉发了这么长的帖子，在此先感谢！

【问题讨论】：

在我看来，您应该在路由配置中使用解析
@Slip 谢谢你的回复，你能解释一下吗？

标签： javascript angularjs twitter-bootstrap angularjs-directive angularjs-routing

【解决方案1】：

我设法解决了它，但我不知道这是否是最佳做法

我使用$locationStartSuccess 并将我正在使用的脚本包装在一个名为bootstrap_without_jquery 的函数中，我在document.ready 上调用它现在它可以工作了：

angular.module('App',['ngRoute']).run(function ($rootScope) {
  $rootScope.$on('$locationChangeSuccess', function(next, current) {
    angular.element(document).ready(function(){

        bootstrap_without_jquery();
    });

  });
})

【讨论】：