單控制器的多個html部分和來自ajax請求的數據angularjs

Question

我試圖用相同的json數據顯示我的html頁面的兩個部分，我不想包含在同一個控制器，因爲它位於不同的區域。我曾在 「角服務」 使用本地JSON數據來實現這一概念成功地看到演示

<div ng-app="testApp"> 
<div ng-controller="nameCtrl"> 
    <a href="#" ng-click="addName();">Add New</a> 
    <a href="#" ng-click="removeName();">Remove First</a> 
    <ul id="first" class="navigation"> 
     <li ng-repeat="myname in mynames">{{myname.name}}</li> 
    </ul> 
</div> 
<div> 
    Lot of things in between 
</div> 

<ul id="second" class="popup" ng-controller="nameCtrl"> 
     <li ng-repeat="myname in mynames">{{myname.name}}</li>   
</ul> 

JS

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


testApp.service('nameService', function($http) { 
    var me = this; 

    me.mynames = [ 
     { 
      "name": "Funny1" 
     }, 
     { 
      "name": "Funny2" 
     }, 
     { 
      "name": "Funny3" 
     }, 
     { 
      "name": "Funny4" 
     } 
    ]; 

    //How to do 
    /*this.getNavTools = function(){ 
     return $http.get('http://localhost/data/name.json').then(function(result) { 
      me.mynames = result.mynames; 
      return result.data; 
     }); 
    };*/ 



    this.addName = function() { 
     me.mynames.push({ 
      "name": "New Name" 
     }); 
    }; 


    this.removeName = function() { 
      me.mynames.pop(); 
    }; 

}); 

testApp.controller('nameCtrl', function ($scope, nameService) { 

    $scope.mynames  = nameService.mynames; 


    $scope.$watch(
     function(){ return nameService }, 

     function(newVal) { 
      $scope.mynames   = newVal.mynames; 
     } 
    ) 

    $scope.addName = function() { 
     nameService.addName(); 
    } 



    $scope.removeName = function() { 
     nameService.removeName(); 
    } 

}); 

jsfiddle

接下來的事情我想做的是做一個HTTP請求到JSON文件並加載我的兩個部分的數據，如果我添加或刪除它d反映在這兩個領域。

任何指針或存在演示將是非常有用的。

感謝

Answer 1

之所以只有一個ngRepeat是更新是因爲它們綁定到兩個不同的陣列。

它怎麼會發生？這是因爲您撥打了getNavTools()兩次，並且在每次通話中，您已將mynames替換爲新的陣列！最後，addName()和removeName()正在處理最後指定的mynames陣列，因此您會看到問題所在。

我有修復你：

testApp.service('nameService', function($http) { 
    var me = this; 
    me.mynames = []; // me.mynames should not be replaced by new result 

    this.getNavTools = function(){ 
     return $http.post('/echo/json/', { data: data }).then(function(result) { 
      var myname_json = JSON.parse(result.config.data.data.json); 
      angular.copy(myname_json, me.mynames); // update mynames, not replace it 
      return me.mynames; 
     }); 
    }; 

    this.addName = function() { 
     me.mynames.push({ 
      "name": "New Name" 
     }); 
    }; 


    this.removeName = function() { 
     me.mynames.pop(); 
    }; 
}); 

testApp.controller('nameCtrl', function ($scope, nameService) { 

    // $scope.mynames  = nameService.mynames; // remove, not needed 

    nameService.getNavTools().then(function() { 
     $scope.mynames = nameService.mynames; 
    }); 

    /* Remove, not needed 
    $scope.$watch(
     function(){ return nameService }, 

     function(newVal) { 
      $scope.mynames   = newVal.mynames; 
     } 
    ); 
    */ 

    $scope.addName = function() { 
     nameService.addName(); 
    }; 

    $scope.removeName = function() { 
     nameService.removeName(); 
    }; 
}); 

http://jsfiddle.net/z6fEf/9/

Answer 2

你可以做的是把數據放到父作用域（也許在$ rootScope），它會觸發兩種觀點，而你並不需要$看這裏..

$rootScope.mynames  = nameService.mynames; 

見jsFiddle