2016-09-23 2 views
0

Я понимаю, как двусторонняя привязка данных работает с AngularJS, но я изо всех сил пытаюсь заставить ее работать в ситуации, описанной ниже. У меня есть файлы index.template.html, home.template.html, search.template.html, app.js, search.controller.js и search.service.js. У меня есть форма ввода на домашней странице в URL-адресе.Изменение привязки данных AngularJS

<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: '/' }); 
    }]); 

С этим фоном, W У меня есть как форма, так и результат html text (content of search.template.html) в том же home.template.html, все работает нормально, и я вижу все результаты, но если я помещаю их в отдельные файлы, как указано выше, либо я не знаю, как открыть результаты в новом представлении после вызова или не знать, не работает ли привязка данных. Я вижу результаты в console.log() в обоих случаях, которые означают, что вызов службы работает нормально, как ожидалось. Это может быть глупый вопрос, но мне действительно нужна помощь в этом. Будет ли он работать, если форма поиска является частью директивы навигации в верхней части каждой страницы, и результаты должны быть показаны ниже в главном представлении ng? Любая помощь приветствуется. Благодарю. - Atarangp

+0

Я думаю, что я получил вид часть правильно, я получил дисплей вид поиска после добавления тега Atarang

ответ

0

Когда вы пишете {{smth}} в HTML он разобранный на $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 ...

+0

Работа с использованием $ rootScope. Спасибо Петру. – Atarang