Question

有人可以告诉我刷新ng-include的正确方法吗？我写了一个插入和删除DVD的应用程序。 DVD列表显示为ng-include：

的index.html

<div class="container-fluid">
  <div class="row" id="topdiv">    
    <div class="col-sm-3 col-md-2 sidebar">
      <div ng-include src="'pages/dvd-list.html'"></div>
    </div>  

    <!-- angular templating -->
    <!-- this is where content will be injected -->
    <div class="col-sm-9 main">
      <div ng-view></div>
    </div>
  </div>
</div>

DVD-list.html

<ul class="nav nav-sidebar" ng:controller="dvdListController">
  <li ng:repeat="dvd in dvdList">
    <a href='#/dvdList/{{ dvd.title }}'>{{ dvd.title }}</a>
  </li>
</ul>

controllers.js

angular.module('dvdManApp', ['ngRoute'])
.config(function($routeProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/dvdList/:title', {
            templateUrl   : 'pages/dvd-details.html', 
            controller : 'dvdDetailsController'
        });
})

.controller('mainController', ['$scope', function($scope) {     
    $scope.message = 'Insert content here';

    $scope.addDvd = function () {
        window.location = "#/dvdList/add";
    };
}])

.controller('dvdDetailsController', ['$scope', '$routeParams', 'DataFactory', function($scope, $routeParams, DataFactory) {
    DataFactory.getDVDItem($routeParams.title).success(function(response){$scope.dvd = response;});

    $scope.createDVD = function () {
        DataFactory.insertDVD($scope.dvd).success(function(response){window.alert("Insert OK.");window.location.reload();}).error(function(response){"Insert NOT OK!!"});           
        window.location = "#/";
    };

    $scope.deleteDVD = function () {
        DataFactory.deleteDVD($scope.dvd.title).success(function(response){window.alert("Delete OK.");window.location.reload();}).error(function(response){window.alert("Delete NOT OK!!.");});
        window.location = "#/";
    };

}])

.controller('dvdListController', ['$scope', 'DataFactory', function($scope, DataFactory) {              
     DataFactory.getDVDList().success(function(response) { $scope.dvdList = response.alldvd; }).error(function(result){});       
}]);

现在问题是，当我添加新的DVD时，ng-include不会刷新。如何在不使用window.location.reload（）的情况下执行刷新？

THX

Answer 1

提取您的逻辑以获取/添加DVD到DvdFactory。然后在你的ng-included模板中，只需使用DvdFactory中的getter来访问列表。这样，无论何时添加/删除，ng-repeat都会自动更新。

Answer 2

我让它自动更新，但我使用了一个角度值来存储我的数据。

http://plnkr.co/edit/1l7g6HzRuzGZQT5W7X0v?p=info

app.controller('AddCtrl', function($scope, movies, $location) {
  function guid() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '' + s4() + '' + s4() + '' +
      s4() + '' + s4() + s4() + s4();
  }
  $scope.add = function() {
    var gid = guid();
    movies.push({
      id: gid,
      movie: $scope.name,
      about: $scope.about,
      image: 'http://placekitten.com/g/200/300'
    });
    $location.path('/details/' + gid);
  };
});

编辑：回答您的comment：您正在以JavaScript数组的形式缓存客户端上的数据。如果这是你的策略，我提到的方法或Primms的方法似乎都很好。（就个人而言，我会选择后者）。

但是，如果缓存是不受欢迎的，那么您可以根据需要从服务器获取缓存。但是你怎么知道什么时候去服务器？

你必须依靠承诺和事件。

AngularJS：插入后刷新ng-include

2 个答案: