Question

我的问题是当我第一次加载页面时angular运行良好。但是当我的html加载了ajax时，我尝试使用相同的东西，它根本不起作用。我也无法在控制台中看到任何相关的错误。

的javascript：

var myApp = angular.module('myApp', ['ngSanitize','ui.utils']);

myApp.controller('CtrlPerformanceByTrack', function($scope, $http) {
    $http.get(site_url + 'performance/?method=get_performance_by_track_data').success(function(data, status) {
        /*console.log(data.data);
         data=[{"title":"title 1","length":"3:02","plays":4,"sales":2,"likes":8},
         {"title":"title 1","length":"3:02","plays":4,"sales":2,"likes":8}]
         console.log(data);*/
        $scope.tracks = data.data;
    }).error(function(data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
    });
});

HTML：

<div data-ele="PerformanceByTrackApp" class="track-block" ng-controller="CtrlPerformanceByTrack">
            <div class="title">
                Performance by track
            </div>
            <div class="search-block">               
                <form>
                    <div class="content fr">
                        <div class="left-input">
                            <input type="text" class="form-control" placeholder="Search Track" ng-model="searchTrack">

                        </div>
                        <div class="right-icon-block">
                            <span class="icon-magnifying42 search-icon"></span>
                        </div>
                    </div>
                </form>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
            <div class="table-block">
                <table class="table table-striped table-responsive track-table">
                    <thead class="title">
                        <th style="width:50%;">Title</th>
                        <th style="width:13%;">Length</th>
                        <th style="width:13%;">Plays</th>
                        <th style="width:13%;">Sales</th>
                        <th style="width:14%;">Likes</th>
                    </thead>
                    <tr ng-repeat="item in tracks | filter:searchTrack">
                        <td>{{item.title}}</td>
                        <td>{{item.length}}</td>
                        <td>{{item.plays}}</td>
                        <td>{{item.sales}}</td>
                        <td>{{item.likes}}</td>
                    </tr>


                </table>
            </div>
        </div>

样本位于以下网址： http://engagev2.ncryptedprojects.com/performance

通过左侧的ajax点击性能标签调用同一页面。

Answer 1

如果您通过AJAX获取此部分HTML，则应正确插入。您必须使用角度$compile服务。以下是简化示例。

...
var template = getTemplate();
var compiledElement = $compile(template)($scope);
element.append(compiledElement);
...

这是链接https://docs.angularjs.org/api/ng/service/ $ compile

在使用ajax添加html后，Angularjs无法正常工作

1 个答案: