[英]Sharing ng-model data between states in ui-router
I cannot seem to be able to get this form to update my model. 我似乎无法获得此表格来更新我的模型。 It worked using ng-route but I decided to changed to ui-router as I wanted to nest templates. 它使用ng-route可以工作,但是由于我想嵌套模板,所以我决定更改为ui-router。
I've tried a few things from here How do I share $scope data between states in angularjs ui-router? 我从这里尝试了一些方法如何在angularjs ui-router中的状态之间共享$ scope数据? but no luck. 但没有运气。
home.html home.html的
<form class="input-lg m-t m-l-n-xs hidden-lg hidden-md hidden-sm" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
</span>
<input type="text" ng-model="searchQuery" ng-change="changeView('search')" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
</div>
</div>
</form>
Controller 调节器
angular.module('musica', ['ui.bootstrap', 'ngFacebook', 'spotify', 'cb.x2js', 'ngRoute', 'ui.router'])
.config(function ( $facebookProvider, SpotifyProvider, $routeProvider, $httpProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('login', {
url: "/",
templateUrl: "partials/login.html",
}).state('home', {
templateUrl: "partials/home.html",
}).state('home.select', {
templateUrl: "partials/home.select.html"
}).state('home.search', {
templateUrl: "partials/home.search.html",
}).state('home.queue', {
templateUrl: "partials/home.queue.html"
}).state('join', {
templateUrl: "partials/join.html"
}).state('creating', {
templateUrl: "partials/creating_venue.html"
}).state('home.server', {
templateUrl: "partials/home.server.html"
})
})
.controller( 'DemoCtrl', ['$scope','$rootScope', '$location', '$facebook', 'Spotify', 'x2js', '$http', '$state', 'globalStore', function ($scope, $rootScope, $location, $facebook, Spotify, x2js, $http, $state, globalStore) {
$scope.searchQuery='hello';
$scope.changeView = function(view){
if(!$state.is('home.search'))
{
$state.go('home.search');
}
$scope.searchTrack();
};
$scope.searchTrack = function () {
console.log('searching ' + $scope.searchQuery.query);
Spotify.search(this.searchQuery.query, 'track').then(function (data) {
$scope.tracks = data.tracks.items;
});
};
If I then type in the search box all I get is hello and not the updated value. 如果然后在搜索框中键入,我得到的只是问候,而不是更新的值。 I thought that since I don't mention controllers in the state provider that only one controller would be instantiated. 我以为,由于我没有在状态提供程序中提及控制器,因此只能实例化一个控制器。 I would really like to know what is going on. 我真的很想知道发生了什么。 Thank you very much. 非常感谢你。
One think with $scope sharing is - we need a reference
, not valueType
. $ scope共享的一种想法是-我们需要一个reference
,而不是valueType
。
So, if we want to share data among 'home' hierarchy family... the home controller just should introduce Model = {}
因此,如果我们要在“家庭”层次结构族之间共享数据,则家庭控制器只需引入Model = {}
.state('home', {
templateUrl: "partials/home.html",
controller: function($scope){ $scope.Model = {}},
...
And later we can use that to share data 然后我们可以用它来共享数据
$scope.Model.searchQuery = 'hello';
And 和
<input type="text" ng-model="Model.searchQuery" ...
Also check this: Model in a modal window in angularjs is empty 还要检查一下: angularjs模态窗口中的模型为空
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.