AngularJs過濾數據在另一個控制器

我使用兩個控制器和一個工廠服務來從中獲取數據。我想通過輸入'ng-model'過濾第二個控制器中的數據。所以我已經在兩個控制器中編寫了輸入ng-model（檢查index.html）。它的工作，如果我試圖在第二個控制器輸入字段中輸入輸入數據，但它不工作，如果我嘗試從第一個控制器輸入ng-app過濾。AngularJs過濾數據在另一個控制器

的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>    
    <script src="scripts/controller.js"></script> 
</head> 


<body ng-app="app" ng-controller="appCtrl">  
    <div style="float: left; width: 300px;">    
      <div ng-controller="checkBoxModuleCtrl">      
       <ul> 
        <li ng-repeat="item in chkBoxList" style="list-style: none;"> 
         <input type="checkBox" value="{{item}}" ng-click="checkBoxClickHandler($index, $event)"> {{item}} 
        </li>     
       </ul>     
       <input type="text" ng-model="myText" /> 
      </div>   
    </div> 

    <!--<input type="button" ng-click="checkBoxClickHandler()" value="Click Me!"> </input>--> 

    <div style="float: left; width: 400px; height: 600px; overflow-y: scroll;" > 

     <div> 
      <div ng-controller="panelCtrl"> 
       <input type="text" ng-model="myText" />      
       <ul> 
        <li ng-repeat="panelItem in panelData|filter:myText" style="list-style: none;"> 
         <div>        
          <b>Title </b/>: {{panelItem.name }}<br/> 
          <b>Channel-Type </b>: {{panelItem.type }}<br/> 
          <b>description </b>: {{panelItem.description }} 
         </div> 
         <hr weight="5" /> 
        </li> 

       </ul>  
      </div> 

     </div> 
    </div> 
</body> 

</html>

controller.js

var app = angular.module("app", ["checkBoxserviceModule"]); 


app.controller('appCtrl', function($scope){ 

}); 

app.controller('checkBoxModuleCtrl', function($scope, externals){ 

    $scope.chkBoxList = []; 

    $scope.init = function(){ 
     $scope.chkBoxList = externals.getCheckBoxList() 
    }; 
    $scope.init(); 

    $scope.checkBoxClickHandler = function(itemIndex, event){ 
     alert(event.currentTarget.value + "will be handling click listener for check box" + itemIndex) 
    } 
}); 

app.controller("panelCtrl", function($scope, externals){ 
    $scope.init = function(){ 
     $scope.panelData = externals.getPanelData();   
    }; 
    $scope.init(); 

    $scope.customFilter = function(panelItem){ 
     return panelItem.toUpperCase; 

    } 

}); 

var checkBoxserviceModule = angular.module("checkBoxserviceModule", []); 
checkBoxserviceModule.factory("externals", function(){ 
    return{ 
     getCheckBoxList : function(){ 
      return [ "sports", "movies", "entertainment", "news" ] 
     }, 

     getPanelData : function(){ 
     //alert("in services") 
      return [ 
        { 
         "name":"cinmax", 
         "type": "movies", 
         "description":"Some Tesxt" 

        }, 
        { 
         "name":"setmax", 
         "type": "sports", 
         "description":"Some Tesxt" 

        }, 
        { 
         "name":"mtv", 
         "type": "entertainment", 
         "description":"Some Tesxt" 

        }, 
        { 
         "name":"ibn news", 
         "type": "news", 
         "description":"Some Tesxt" 

        } 
       ]; 
      } 


    }; 
});

來源

2014-07-10 Bharath

使用服務，而不是一個工廠，如果你想分享的控制器之間的數據。服務是單身人士，工廠總是新的實例 – 23tux

控制器使用原型繼承共享範圍。所以，你需要確保你想要繼承的對象是一個實際的對象，以便引用保持綁定。如果試圖從範圍中共享一個原語，它們將不會被正確綁定，並且每個控制器都會最終生成它自己的副本。

這可能會在開始時正確繼承，但只要您更改子級的scope.number的值，綁定就會斷開連接。

-ParentController 
    -scope.number = 4 
    -ChildController 
    -scope.number //will not stay binded to parent's scope

這對otherhand，如果你創建的範圍對象，將繼承對象的引用，在孩子控制器將保持綁定。

-ParentController 
    -scope.myObject.number = 4 
    -ChildController 
    -scope.myObject.number //will stay binded to parent's scope

這是一個更好的解釋：Why don't the AngularJS docs use a dot in the model directive?

來源

2014-07-10 21:58:58 tommybananas

我已經將孩子控制器移動到父控制器，它的工作，謝謝。 – Bharath

AngularJs過濾數據在另一個控制器

回答

相關問題