Javascript 我的模板没有更新_Javascript_Jquery_Angularjs

Javascript 我的模板没有更新

javascript jquery angularjs

Javascript 我的模板没有更新,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,MainController.js app.controller("mainController", function($scope, $http){ $scope.movies = []; $scope.searchFilter = ''; $scope.init = function() { }; $scope.getMovies = function(){ var movieName = $('#MovieName').val(); var movies = getMo

MainController.js

app.controller("mainController", function($scope, $http){
$scope.movies = [];
$scope.searchFilter = '';
$scope.init = function() {

};

$scope.getMovies = function(){
    var movieName = $('#MovieName').val();
    var movies = getMovies(movieName); // Gets json
    $scope.parseMovies(movies);    
};

$scope.parseMovies = function(movies){
    $scope.movies = [];
    $.each(movies, function( index, value ) {
        $scope.movies.push($scope.createMovie(value));
    });
};

$scope.createMovie = function(json){
    Movie=new Object();
    Movie.id=json.id;
    Movie.title=json.title;
    Movie.year=json.year;
    Movie.runtime=json.runtime;
    return Movie;
};

});

app.js

var app = angular.module('MoviesApp',[]);

html




{{movie.title}

当我单击按钮并调用

getMovies（）

时，数据被检索到，但模板没有被填充。只有当我再次点击按钮时，它才会被填满

问题是，当第二次单击它时，在检索新的json之前，模板会被填充（我在脚本中放置了一个断点）

我被卡住了

首先，所有这些逻辑不应该在你的控制器中。所有名称中带有

Movie

的方法都应该在服务中，或者在与Angular无关的普通JS对象中。其次，getMovies是递归的，从不发出任何HTTP请求——它甚至做了什么？第三，当你在角度循环之外使用jQuery之类的东西运行代码时，你需要调用

$scope.$apply

将其重新连接，但是如果你正确地编写代码，你就不必这样做了。他使用了ng click，所以他在角度循环之内，为什么他需要$scope.$apply？@EranH。因为这里没有显示代码。我看到了

$。每一个，这让我假设有一个$。ajax
而不是在某处使用$http，上面的代码并不完整。考虑到他所看到的，这看起来也像是一个教科书上的例子。“当我单击按钮并调用getMovies（）时，数据被检索到，但模板没有被填充。只有当我再次单击按钮时，它才会被填充。”听起来很像摘要循环滥用。你是对的，这可能是getMovies内部的ajax调用。我制作了一个提琴来演示使用一个简单的getMovies函数它可以工作：
<body ng-controller="MovieListCtrl">    
    <div class="container main-frame" ng-app="MoviesApp" ng-controller="mainController">
        <input type="text" id="MovieName" />
        <input type="button" data-ng-click="getMovies()" />        
        <ul>
            <li ng-repeat="movie in movies">
                {{movie.title}}
            </li>
        </ul>
    </div>    
</body>