雙向數據綁定不適用於控制器-AngularJS

Question

早上好，大師們。 我無法使雙向數據綁定正常工作。 數據綁定在其他所有控制器中都可以正常工作的兩種方式，但這給我帶來了麻煩。 你能幫忙嗎？

控制器/ HTML：

 app.controller('search', function($scope, $http, $location) { $scope.searchText = ""; $scope.searchRun = function() { $scope.userQuery = "Last::Name+eq+"+$scope.searchText.replace(/ /g,"::")+"+or+First::Name+eq+"+$scope.searchText.replace(/ /g,"::")+"+or+Display::Name+eq+"+$scope.searchText.replace(/ /g,"::")+"+or+User::Login+eq+"+$scope.searchText.replace(/ /g,"::")+"+or+Manager::Display::Name+eq+"+$scope.searchText.replace(/ /g,"::"); $http({ method: 'GET', url: url }) .then(function(res) { $scope.TransmutedUsers = { users: [ ] }; //Looping through users making a new object for(var i = 0; i < res.data.users.length; i++) { //console.log(res.data.users[i].id); var obj = { id: res.data.users[i].id }; for(var x = 0; x < res.data.users[i].fields.length; x++) { //console.log(res.data.users[i].fields[x].name); var nameVar = res.data.users[i].fields[x].name.replace(/\\s+/g, ''); var valueVar = res.data.users[i].fields[x].value; obj[nameVar] = valueVar; } $scope.TransmutedUsers.users.push(obj); } console.log($scope.TransmutedUsers.users); $scope.returnedUsersLength = $scope.TransmutedUsers.users.length; console.log($scope.returnedUsersLength); sessionStorage.setItem("searchActive", "true"); if ($location.url() != "/search") { $location.url("/search"); } }); }; }); 

 <nav class="navbar navbar-default navbar-fixed-top bg-color--brand-blue"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a class="navbar-brand" href="#"><img src="/images/logo.png" class="logo" alt=""></a></li> <li><a href="/dashboard"><img src="/images/eAccess-logo-header.png" width="80" alt=""></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/profile">Welcome, <span>{{userName}}</span></a></li> <li><a href="/profile">Contact Help</a></li> <li><a href="/profile">Close Window</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="sub-header bg-color--light-grey"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <div class="row"> <div class="col-sm-3"><a href="/newrequest" class="btn btn-primary btn-sm">Make a Request</a></div> <div class="col-sm-2 padding-right-none"><a href="/myprofile">My Profile</a></div> <div class="col-sm-2 padding-left-none"><a href="/directs">My Direct Reports</a></div> <div class="col-sm-2"><a href="/requests">My Requests</a></div> </div> </div> <div class="col-sm-6"> <form ng-controller="search" ng-submit="searchRun();" class="pull-right"> <input type="text" placeholder="Search for people or requests" ng-model="searchText"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> </div> </div> <div class="container" id="Search" ng-controller="search"> <div class="row" id="SearchResultsUsers"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-12"> <h1>Search Results: <i>{{searchText}}</i></h1> </div> </div> <div class="row" ng-repeat="user in TransmutedUsers.users"> <div class="col-sm-12"> <h3><i class="fa fa-user-circle"></i> <strong>{{user.FirstName}}</strong> {{user.LastName}} <small>({{user.UserLogin}})</small> <span>{{user.Role}}</span></h3> </div> <div class="col-sm-12"> <p>{{user.JobTitle}}, <a href="mailto:{{user.Email}}" ng-show="user.Email">{{user.Email}}</a> <span ng-show="user.Phone">{{user.Phone}}</span> Reports to: {{user.ManagerDisplayName}}</p> </div> <div class="col-sm-12"> <p>Direct Reports: <span ng-show="user.DirectReports">{{user.DirectReports}}</span><span ng-show="!user.DirectReports">None</span></p> </div> </div> </div> </div> </div> 

searchText會進行console.log，但不會綁定到{{searchText}}，並且url會以指定的格式成功返回對象，但是對{{}}也不起作用。

使用AngularJS 1.6

如果需要其他信息來幫助我解決這個難題，請告訴我。 謝謝你們！

Answer 1

在搜索功能之外聲明$ scope.searchText之后，

您可以通過替換以下形式強制使用：

<form ng-controller="search" ng-submit="searchRun();" class="pull-right">
                    <input type="text" placeholder="Search for people or requests" ng-model="searchText">
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>

像這樣簡單：

<input type="text" placeholder="Search for people or requests" ng-model="searchText">
 <button ng-click="searchRun(searchText)"><i class="fa fa-search"></i></button>

並在您的搜索功能內：

$scope.searchRun = function(searchText) {
        $scope.searchText = searchText;
        ...rest of ur code

---

您還可以嘗試使用此工具進行調試，以便直接在html中查看輸入中所做的更改。

<input type="text" ng-model="searchText">
{{searchText}}

並在您的控制器中聲明函數外

$scope.searchText = "";

Answer 2

所以問題是您使用了兩個ngControllers。

從Angularjs文檔

當通過ng-controller指令將Controller附加到DOM時，AngularJS將使用指定的Controller的構造函數實例化一個新的Controller對象。 將創建一個新的子作用域，並將其作為可注入參數提供給Controller的構造函數$ scope。

因此，請嘗試在DOM結構的上方通過ng-controller聲明一個"search"控制器，以便Divs共享該控制器實例。 與angularjs服務不同，控制器不是單例的。

我為您創建了一個插銷顯示問題： http://plnkr.co/edit/J2Ho1uLq0jzuVLlX3BLG

更改一個控制器的作用域不會更改另一個控制器的作用域