将一个控制器值发送到 angularjs 中具有不同视图的另一个控制器值
Send one controller value to another in angularjs with different views
我正在使用 ONSEN UI 构建移动应用程序。我正在使用 angularjs 作为支持 JavaScript 框架。
这是我在单个页面模板中有 2 个视图的方法。
<ons-template id="categories.html">
<ons-page ng-controller="directoryControl">
<ons-toolbar>
<div class="center">Directory Category List</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
<ons-row ng-click="setCurrentCategory(PostCategory.slug); menu.setMainPage('directory-page.html')">
<ons-col>
<div class="name">
{{PostCategory.title}}
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<!-- when i click on any row (List Item) -->
<ons-template id="directory-page.html">
<ons-page ng-controller="directoryCategoryListing">
<ons-toolbar>
<div class="center">Directory List</div>
</ons-toolbar>
<p style="text-align: center" ng-show="spinner">
<ons-icon icon="spinner" class="spinner center" size="40px" spin="true" fixed-width="true" ></ons-icon>
</p>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container">
<ons-row>
<ons-col width="95px">
<img src="images/location1.png" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
Some Title
</div>
<div class="desc">
Some Description
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
我的控制器是这样的:
var module = angular.module('app', ['onsen']);
module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {
$scope.spinner = true;
$scope.CurrentCategory = null;
//some other code in between
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
}
});
});
/* Second CONTROLLER WHERE I WANT $scope.CurrentCategory value */
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($scope.CurrentCategory);
});
});
我可以在第一个控制器中获取点击行(列表项)的值。但是不能把它带到第二个。有什么办法可以做到吗?
模板结构为一页样式。 http://codepen.io/anon/pen/wavYzY供参考
谢谢! (提前)
使用$rootScope在controller.seecodepen
之间进行通信
使用此代码:
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
$rootScope.CurrentCategory=$scope.CurrentCategory;
}
并将第二个控制器代码替换为:
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($rootScope.CurrentCategory);//it will log
});
});
我正在使用 ONSEN UI 构建移动应用程序。我正在使用 angularjs 作为支持 JavaScript 框架。
这是我在单个页面模板中有 2 个视图的方法。
<ons-template id="categories.html">
<ons-page ng-controller="directoryControl">
<ons-toolbar>
<div class="center">Directory Category List</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
<ons-row ng-click="setCurrentCategory(PostCategory.slug); menu.setMainPage('directory-page.html')">
<ons-col>
<div class="name">
{{PostCategory.title}}
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<!-- when i click on any row (List Item) -->
<ons-template id="directory-page.html">
<ons-page ng-controller="directoryCategoryListing">
<ons-toolbar>
<div class="center">Directory List</div>
</ons-toolbar>
<p style="text-align: center" ng-show="spinner">
<ons-icon icon="spinner" class="spinner center" size="40px" spin="true" fixed-width="true" ></ons-icon>
</p>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container">
<ons-row>
<ons-col width="95px">
<img src="images/location1.png" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
Some Title
</div>
<div class="desc">
Some Description
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
我的控制器是这样的:
var module = angular.module('app', ['onsen']);
module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {
$scope.spinner = true;
$scope.CurrentCategory = null;
//some other code in between
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
}
});
});
/* Second CONTROLLER WHERE I WANT $scope.CurrentCategory value */
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($scope.CurrentCategory);
});
});
我可以在第一个控制器中获取点击行(列表项)的值。但是不能把它带到第二个。有什么办法可以做到吗?
模板结构为一页样式。 http://codepen.io/anon/pen/wavYzY供参考
谢谢! (提前)
使用$rootScope在controller.seecodepen
之间进行通信使用此代码:
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
$rootScope.CurrentCategory=$scope.CurrentCategory;
}
并将第二个控制器代码替换为:
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($rootScope.CurrentCategory);//it will log
});
});