Question

我理解双向数据绑定如何与AngularJS一起使用，但我正努力使其在下面描述的情况下工作。我有一个index.template.html，home.template.html，search.template.html，app.js，search.controller.js和search.service.js文件。我在'/'url的主页上有一个输入表单。

<li ng-controller="searchCtrl">   //searchCtrl() in search.controller.js file
  <form role="search">
    <input type="text" ng-model="searchstring" 
      placeholder="Enter string here"> <br />
    <button type="submit" 
      ng-click="searchString(searchstring)">Search</button>
  </form>
</li>

我在search.template.html上显示结果如下，

<html>
<body>
  <h1> SearchedText</h1>
  <h2> {{ searchedtext }} </h2>
</body>
</html>

search.controller.js如下，

(function () {
 angular
   .module('twowaybindapp')
   .controller('searchCtrl', searchCtrl);
   searchCtrl.$inject = ['$scope', 'SearchService'];

function searchCtrl($scope, SearchService) {
  $scope.searchString = function(searchtext) {
    SearchService
      .getSearchResults(searchtext)   //getSearchResults in search.service.js
      .success(function(data) {
        console.log('Service call is a success with result:');
        console.log(data);    
        $scope.searchedtext = data; 
      }).error(function(e) {
        console.log(e);
      });
  };
}
})();

我的app.js文件如下，

  var myApp = angular.module('twowaybindapp', [ 'ngRoute' ]);
  myApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
      $routeProvider.
        when('/', {
        templateUrl: 'home.view.html'
      }).
      when('/search', {
        templateUrl: 'search.view.html',
        controller: 'searchCtrl'
      }).
      otherwise({ redirectTo: '/' });
  }]);

有了这个背景，当我在同一个home.template.html中形成和结果html文本（search.template.html的内容）时，一切正常，我看到所有结果但是如果我把它们放进去如上所述单独的文件，要么我不知道如何在调用后在新视图中打开结果，或者不知道数据绑定是否不起作用。我确实在两种情况下都看到console.log（）中的结果，这意味着服务调用正常工作正常。这可能是一个愚蠢的问题，但我真的需要帮助。如果搜索表单是每个页面顶部导航指令的一部分，并且结果需要在主要视图中显示如下，那么它会起作用吗？任何帮助表示赞赏。谢谢。 - Atarangp

Answer 1

当你在html中编写{{smth}}它解析为$scope.smth时，每个控制器都有自己的范围对象，默认范围是嵌套的：

<div ng-controller="c1" ng-init="smth = 1">
    <div ng-controller="c2">
        {{smth}} << 1
    </div>
</div>
<div ng-controller="c3">
    {{smth}} << undefined
</div>

当您定义了多个视图时 - 它们将具有不同的范围，因此您无法看到另一个范围。

使其成功的最快方法是更改为$rootScope.searchedtext = data;，因为所有范围都来自根范围。

其他方式是建立共同的父状态并访问并在那里设置你的属性。

另一种方法是：使用您自己的服务来存储数据，使用事件传递数据，使用状态obj中的属性传递数据......

AngularJS数据绑定和视图更改

1 个答案: