Angular js控制器无法正确加载

时间:2014-06-24 08:55:06

标签: jquery angularjs controller

我正在开发一个混合了jquery和angularjs的web,出于某种原因,我不能使用jquery并且仅使用angularjs来放弃它。情况就是这样。

我的网络LHS上有一个导航栏,单击按钮将使用ajax刷新指定div DOM(RHS)的内容,对于RHS的内容,我加载了angularjs并使用jquery显示我的内容getScript加入。

我的controller.js中有以下内容

/***angularjs controller***/
                        var testApp = angular.module('testApp', []).controller('testController', function ($scope) {

                            debugger;

                            $scope.dataIs= [

                                                {'name': 'Nexus S',
                                                 'snippet': 'Fast just got faster with Nexus S.'},
                                                {'name': 'Motorola XOOM? with Wi-Fi',
                                                 'snippet': 'The Next, Next Generation tablet.'},
                                                {'name': 'MOTOROLA XOOM?',
                                                 'snippet': 'The Next, Next Generation tablet.'}
];

//show table of content
                        Tbl.fadeOut().delay(1000).fadeIn(function(){});

以下视图

<div ng-app="testApp" class="row">

                <table class="table table-striped table-hover">
                    <tr>
                        <th class="col-md-1"></th>
                        <th class="col-md-1">colA</th>
                        <th class="col-md-1">colB</th>
                        <th class="col-md-2">colC</th>
                        <th class="col-md-1">colD</th>
                        <th class="col-md-2">colE</th>
                    </tr>

                    <tbody ng-controller="testController">
                        <tr ng-repeat="dataI in dataIs">
                            <td>{{dhcpI.name}}</td>
                            <td>{{dhcpI.name}}</td>
                            <td>haha</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>

我已经在控制器功能中放了一个调试器,但它似乎没有运行,我想知道为什么视图直接显示

{{xxx}}&gt;&gt;模板

任何帮助将不胜感激,非常感谢


我弄清楚问题是什么,但不知道如何解决,我做了一个简单的例子来测试并得出以下结果

  • 我单击一个按钮,该按钮将首先将外部js加载到主文件的div DOM中,然后获取angular.js脚本来解析位于外部html文件中的表达式。

  • 我第一次点击按钮,角度js功能很好,但是第二次,它再次不起作用!我想知道为什么会这样......

主页

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="./test.js"></script>
    </head>

    <body>
        <button id="testBtn">Click</button>

        <div id="contentPane"></div>
    </body>
</html>

js file

$(function(){
    $("button#testBtn").click(function(){
        console.log('click');
        $("div#contentPane").load("./remote.php", function(){
            $.getScript("./angular.js",function(){
            });
        });
    });
});

外部html(更新div)

<html>
    <body>
        <div ng-app>
            {{1+2}}
        </div>
    </body>
</html>

0 个答案:

没有答案