Question

每次在新项目中工作时，我都会将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 task runner在一个名为scripts.js的文件中连接所有文件

图片

中的问题

红色菜单（ng-view外）正在折叠
白色菜单（从direcctive模板渲染）无法正常工作

对于长篇文章我感到非常抱歉，提前谢谢！

Answer 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();
    });

  });
})

使用指令时如何呈现模板

1 个答案: