0

早上好S.O.大師。我很難獲得雙向數據綁定的工作。雙向數據綁定在其他控制器中工作沒有問題,但是這個給我一個很難的時間。你能幫忙嗎?雙向數據綁定沒有與控制器應用 - AngularJS

控制器/ HTML:

app.controller('search', function($scope, $http, $location) { 
 
$scope.searchText = ""; 
 
\t $scope.searchRun = function() { 
 
\t \t 
 
\t \t 
 
\t \t $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,"::"); 
 
\t \t 
 
\t \t $http({ 
 
     \t \t method: 'GET', 
 
     \t \t url: url 
 
    \t \t }) 
 
    \t \t .then(function(res) { 
 
\t \t \t 
 
\t \t \t $scope.TransmutedUsers = { 
 
\t \t \t \t users: [ 
 
\t \t \t 
 
\t \t \t \t ] 
 
\t \t \t }; 
 
\t \t \t //Looping through users making a new object 
 
\t \t \t for(var i = 0; i < res.data.users.length; i++) { 
 
\t \t \t \t //console.log(res.data.users[i].id); 
 
\t \t \t \t var obj = { 
 
\t \t \t \t \t id: res.data.users[i].id 
 
\t \t \t \t }; 
 

 
\t \t \t \t for(var x = 0; x < res.data.users[i].fields.length; x++) { 
 
\t \t \t \t \t //console.log(res.data.users[i].fields[x].name); 
 
\t \t \t \t \t var nameVar = res.data.users[i].fields[x].name.replace(/\s+/g, ''); 
 
\t \t \t \t \t var valueVar = res.data.users[i].fields[x].value; 
 
\t \t \t 
 
\t \t \t \t \t obj[nameVar] = valueVar; \t \t 
 
\t \t \t 
 
\t \t \t \t } 
 
\t \t \t \t \t $scope.TransmutedUsers.users.push(obj); 
 
\t \t \t } 
 

 
\t \t 
 
\t \t \t console.log($scope.TransmutedUsers.users); 
 
\t \t \t $scope.returnedUsersLength = $scope.TransmutedUsers.users.length; 
 
\t \t \t console.log($scope.returnedUsersLength); 
 
\t \t \t sessionStorage.setItem("searchActive", "true"); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t if ($location.url() != "/search") { 
 
\t \t \t \t $location.url("/search"); 
 
\t \t \t } 
 
\t \t \t 
 
    \t \t }); 
 
\t }; 
 
});
<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"> 
 
\t \t \t <h3><i class="fa fa-user-circle"></i> <strong>{{user.FirstName}}</strong> {{user.LastName}} <small>({{user.UserLogin}})</small> <span>{{user.Role}}</span></h3> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12"> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12"> 
 
\t \t \t <p>Direct Reports: <span ng-show="user.DirectReports">{{user.DirectReports}}</span><span ng-show="!user.DirectReports">None</span></p> 
 
\t \t </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

SEARCHTEXT不CONSOLE.LOG但其不結合於{{SEARCHTEXT}}和網址中所指定格式的成功返回對象,但這對於{{}}也不起作用。

使用AngularJS 1.6

請讓我知道,如果需要其他信息來幫助我解決這個難題。謝謝你們!

+0

範圍可以爲您的功能外聲明$ scope.searchText? – Sletheren

+0

這擺脫了一個錯誤,但它仍然不是數據綁定。 – Adro

回答

0

宣佈$ 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 

您也可以嘗試調試該用這個,在otder看到直接在HTML中輸入所做的更改。

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

,並在控制器中聲明函數

$scope.searchText = ""; 
+0

如果我把所有的控制器的代碼放到父控制器中,這可以工作。我似乎無法弄清楚爲什麼控制器是錯誤的,但至少在其父母身上工作。謝謝@Sletheren!我會將其標記爲答案。 – Adro

+0

這很奇怪,因爲如果你在app.js中聲明這個狀態鏈接到這個控制器,它應該直接工作,而不需要父控制器,並且我可以幫助開心:) – Sletheren

0

所以,問題是你的兩個ngControllers的使用之外。

From Angularjs Docs

當控制器連接到經由NG-控制器指令的DOM,AngularJS將實例化新的控制器對象,使用指定的控制器的構造函數。一個新的子作用域將被創建並作爲$ scope的一個注入參數提供給Controller的構造函數。

因此,請嘗試通過ng-controller在您的DOM結構上更高地聲明一個"search"控制器,以便Divs共享此控制器實例。不像angularjs服務控制器不是單身人士。

我創建了一個plunker爲您展現的問題:http://plnkr.co/edit/J2Ho1uLq0jzuVLlX3BLG

更換一個控制器上的範圍不改變其他

+0

這解釋了它!謝謝! – Adro