双向数据绑定不适用于控制器 - AngularJS

Question

早上好S.O。大师。我很难让双向数据绑定正常工作。数据绑定的两种方式在其他所有控制器中都没有问题，但是这个让我很难过。你能帮忙吗？

控制器/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 会 return 以指定的格式成功地绑定对象，但事实并非如此与 {{}} 一起工作。

使用 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

所以问题是您使用了两个 ngController。

From Angularjs Docs

When a Controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

因此，请尝试通过 ng-controller 在您 DOM 结构的上层声明一个 "search" 控制器，以便 Divs 共享该控制器实例。不像 angularjs 服务控制器不是单例。

我已经为你创建了一个 plunker 来显示问题：http://plnkr.co/edit/J2Ho1uLq0jzuVLlX3BLG

改变一个控制器的范围不会改变另一个控制器的范围

双向数据绑定不适用于控制器 - AngularJS

Two-Way Data Bind Not Applying with Controller - AngularJS

html

javascript

model-view-controller

2-way-object-databinding

angularjs