Question

我正在使用两个控制器和一个工厂服务来从中获取数据。我想通过输入＆＃39; ng-model＆＃39;来过滤第二个控制器中的数据。所以我在两个控制器中都写了输入ng-model（检查index.html）。它工作，如果我试图在第二个控制器输入字段中输入输入数据，但如果我尝试从第一个控制器输入ng-app进行过滤，它无法正常工作。

的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"

                    }
                ];
            }


    };
});

Answer 1

控制器使用原型继承来共享范围。因此，您需要确保要继承的对象是实际对象，以便引用保持绑定。如果尝试从范围共享一个原语，它们将无法正确绑定，并且每个控制器最终都会自己制作它。

这可能最初会正确继承，但是一旦更改了孩子的scope.number值，绑定就会断开连接。

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

另一方面，如果在作用域上创建对象，则将继承对该对象的引用，并将保留在子控制器中的绑定。

-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?

AngularJs过滤数据在另一个Controller中

1 个答案: