[英]how can I share data between two <ons-template> ?use angularjs and onsen ui
I'm a new with onsen ui and angularjs ,today I get one problem with this here is my HTML code : 我是onsen ui和angularjs的新手,今天我遇到的一个问题是我的HTML代码:
<ons-page ng-controller="DialogController">
<ons-toolbar>
<div class="center">Dialog
{{dataShow.username}}
</div>
</ons-toolbar>
<ons-list >
<ons-list-item ng-click="show('navigator.html')" modifier="tappable">
Navigator
</ons-list-item>
</ons-list>
</ons-page>
<ons-template id="navigator.html">
<ons-dialog style="height: 160px;" var="naviDialog" cancelable>
<ons-navigator var="myNav">
<ons-toolbar inline>
<div class="center">
Navigator {{dataShow.username}}
</div>
</ons-toolbar>
<div style="text-align: center">
<p>
This is a dialog with a navigator.
</p>
<p>
<ons-button onclick="naviDialog.hide()">Close</ons-button>
<ons-button onclick="myNav.pushPage('next.html')">Next</ons-button>
</p>
</div>
</ons-navigator>
</ons-dialog>
</ons-template>
and my javascript looked like this: 和我的JavaScript看起来像这样:
ons.bootstrap()
.controller('DialogController', function($scope) {
$scope.dataShow = {
username : 'huangqiang',
age :'25'
};
$scope.next = function() {
$scope.dialog.hide();
ons.createDialog('dialog2.html').then(function(dialog) {
dialog.show();
});
}
$scope.show = function(dlg) {
ons.createDialog(dlg).then(function(dialog) {
dialog.show();
});
}
});
the question is I can't get result with {{dataShow.username}} in ,did any one can help me out ? 问题是我无法获得{{dataShow.username}}的结果,有人可以帮助我吗?
You need to create a separate controller and use a service to pass the data to the controller. 您需要创建一个单独的控制器,并使用服务将数据传递到控制器。
HTML snippet HTML片段
<ons-dialog style="height: 90%; width: 90%" var="naviDialog" cancelable ng-controller="newsFeedCtrl">
make sure to add the ng-controller on the ons-dialog section instead of the template section 确保在ons-dialog部分而不是template部分上添加ng-controller
JS snippet JS片段
.service("NewsFeedSelectedData", function () {
this.title = "";
this.link = "";
})
.controller("newsFeedCtrl", ['$scope', '$sce', 'NewsFeedSelectedData', function ($scope, $sce, NewsFeedSelectedData) {
$scope.title = NewsFeedSelectedData.title;
$scope.link = $sce.trustAsResourceUrl(NewsFeedSelectedData.link);
}])
While using dialog
, you can pass scope in second parameter of ons.createDialog
function and it should work for your need. 使用dialog
,可以在ons.createDialog
函数的第二个参数中传递作用域,它应该ons.createDialog
您的需要。
For example: 例如:
ons.createDialog('template_name.html',{parentScope: $scope})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.