我想要实现的目标:
alertMessage();
。alertMessage(id:2);
显示的特定消息。当前问题:
无法从alertMessage();
控制器中获取或触发消息功能statsCtrl
。
除了使用var messageID = '1';
之外,我无法通过提醒功能指定消息ID,例如alertMessage(id:2);
我还在学习AngularJS,我知道我可能需要开发工厂或服务,但不知道这会变得多么棘手!
任何帮助和建议都将是有帮助!
控制器一:
fittingApp.controller('dashboardCtrl', ['$scope','$filter','$timeout','Notification','$sce','$mdDialog', function($scope,$filter,$timeout,Notification,$sce,$mdDialog) {
// Dashboard > Username
var username = 'Lucy'; // Test name
$scope.username = username;
// Dashboard > Alert Messages
alertMessage();
function alertMessage(){
// Message ID
var messageID = '1';
// Messages
var messages = {
"results": [
{'id':'1','icon':'','button':true,'title':'Welcome','subtitle':'Hi '+username+', welcome to the Virtual Fitting room','content': 'Here you will be able to browse through a selection of our dresses<br/>and shortlist them for future refrence. To help us find the best<br/>dress for you, please let us know a bit about yourself'},
{'id':'2','icon':'','button':false,'title':'Raiding the Rails','subtitle':'','content': 'From the measurments you have supplied, we see you have a triangle body shape.<br/>Please wait while we get together the 5 best dresses for your shape.'},
{'id':'3','icon':'','button':false,'title':'My Love List','subtitle':'','content': 'Any dresses you mark with a ♥ will store<br/> into your Love list you can review at any<br/> point by clicking the heart icon.'},
{'id':'4','icon':'','button':false,'title':'Show me the Style','subtitle':'','content': 'Feel free to look through the rest of our<br/> collection and ♥ any that you like.'},
{'id':'5','icon':'','button':false,'title':'Second Optionions','subtitle':'','content': 'It can be tough to choose, so why not ask<br/> the ones who know you best to help<br/>by voting for their favourites.'}
]
};
// Message Result
var messageResult = $filter('filter')(messages.results,{id:messageID})[0];
// Message HTML
var message = '<h2>'+messageResult.title+'</h2><h3>'+messageResult.subtitle+'</h3><p>'+messageResult.content+'</p>';
$scope.message = $sce.trustAsHtml(message);
// Show Message
$scope.showMessage = {
active: true
};
// Hide Message
$scope.hideMessage = function(){
$scope.showMessage.active = !$scope.showMessage.active;
// Trigger Notification
notification();
};
// Hide 'Continue' Button
$scope.hideButton = {
active: true
};
if(messageResult.button === true){
$scope.hideButton.active = !$scope.hideButton.active;
}
}
// Dashboard > Notifications
function notification(){
// Bethan Test Notification
$timeout(function(){
Notification.bethan({
message: 'Hi ' +username+ '! you’re not sure what to do? Hover the menu in the top right and click',
positionY: 'bottom',
positionX: 'left',
delay: 10000,
templateUrl: "views/notification.html"
});
}, 3000);
// Rhiannon Test Notification
$timeout(function(){
Notification.rhiannon({
message: 'This dress is perfect for a Triangle body shape like yours!',
positionY: 'bottom',
positionX: 'left',
delay: null,
templateUrl: "views/notification.html"
});
}, 6000);
}
}]);
控制器二:
fittingApp.controller('statsCtrl', ['$scope', function($scope) {
alertMessage();
}]);
完整的JS
// START APP
var fittingApp = angular.module('fittingApp');
// Dashboard Controller
fittingApp.controller('dashboardCtrl', ['$scope','$filter','$timeout','Notification','$sce','$mdDialog','CustomService', function($scope,$filter,$timeout,Notification,$sce,$mdDialog,CustomService) {
// Dashboard > Username
var username = 'Lucy'; // Test name
$scope.username = username;
// Dashboard > Alert Messages
alertMessage();
function alertMessage(){
// Message ID
var messageID = '1';
// Messages
var messages = {
"results": [
{'id':'1','icon':'','button':true,'title':'Welcome','subtitle':'Hi '+username+', welcome to the Virtual Fitting room','content': 'Here you will be able to browse through a selection of our dresses<br/>and shortlist them for future refrence. To help us find the best<br/>dress for you, please let us know a bit about yourself'},
{'id':'2','icon':'','button':false,'title':'Raiding the Rails','subtitle':'','content': 'From the measurments you have supplied, we see you have a triangle body shape.<br/>Please wait while we get together the 5 best dresses for your shape.'},
{'id':'3','icon':'','button':false,'title':'My Love List','subtitle':'','content': 'Any dresses you mark with a ♥ will store<br/> into your Love list you can review at any<br/> point by clicking the heart icon.'},
{'id':'4','icon':'','button':false,'title':'Show me the Style','subtitle':'','content': 'Feel free to look through the rest of our<br/> collection and ♥ any that you like.'},
{'id':'5','icon':'','button':false,'title':'Second Optionions','subtitle':'','content': 'It can be tough to choose, so why not ask<br/> the ones who know you best to help<br/>by voting for their favourites.'}
]
};
// Message Result
var messageResult = $filter('filter')(messages.results,{id:messageID})[0];
// Message HTML
var message = '<h2>'+messageResult.title+'</h2><h3>'+messageResult.subtitle+'</h3><p>'+messageResult.content+'</p>';
$scope.message = $sce.trustAsHtml(message);
// Show Message
$scope.showMessage = {
active: true
};
// Hide Message
$scope.hideMessage = function(){
$scope.showMessage.active = !$scope.showMessage.active;
// Trigger Notification
notification();
};
// Hide 'Continue' Button
$scope.hideButton = {
active: true
};
if(messageResult.button === true){
$scope.hideButton.active = !$scope.hideButton.active;
}
}
// Dashboard > Notifications
function notification(){
// Bethan Test Notification
$timeout(function(){
Notification.bethan({
message: 'Hi ' +username+ '! you’re not sure what to do? Hover the menu in the top right and click',
positionY: 'bottom',
positionX: 'left',
delay: 10000,
templateUrl: "views/notification.html"
});
}, 3000);
// Rhiannon Test Notification
$timeout(function(){
Notification.rhiannon({
message: 'This dress is perfect for a Triangle body shape like yours!',
positionY: 'bottom',
positionX: 'left',
delay: null,
templateUrl: "views/notification.html"
});
}, 6000);
}
// Dashboard > Menu (FAB Speed Dial)
menu();
function menu(){
$scope.hidden = false;
// Menu Items
$scope.items = [
{name:"Help",icon:"svg/help.svg",direction:"left",backgroundColor:"rgb(239, 149, 73)"},
{name:"Book",icon:"svg/book.svg",direction:"left",backgroundColor:"rgb(95, 205, 155)"},
{name:"Contact",icon:"svg/contact.svg",direction:"left",backgroundColor:"rgb(32, 133, 188)"},
{name:"Share",icon:"svg/share.svg",direction:"left",backgroundColor:"rgb(102, 181, 215)"},
{name:"Exit",icon:"svg/exit.svg",direction:"left",backgroundColor:"rgb(255, 206, 97)"}
];
}
// Example
$scope.$watchCollection(function() { return CustomService.showMsg; }, function(o, n){
if(n === true){
showMessage("Success");
}
});
var showMessage = function(msg){
alert(msg);
CustomService.showMsg = false;
};
// END Example
}]);
// End Dashboard Controller
// Stats Controller
fittingApp.controller('statsCtrl', ['$scope', 'CustomService', function($scope, CustomService) {
// Example
$scope.clickMe = function(){
console.log("Set true");
CustomService.showMsg = true;
};
// END Example
// Default Stats (Average UK Woman)
defaultStats();
function defaultStats(){
$scope.height = 525; // 5'3"
$scope.chest = 32; // 32"
$scope.waist = 30; // 30"
$scope.hips = 34; // 34"
$scope.thighs = 20; // 20"
}
// Reset Stats
$scope.resetStats = function(){
defaultStats();
};
// Body Type Formula
bodyShape();
function bodyShape(){
var bust = 32;
var waist = 30;
var hips = 34;
var bustMeasure = "";
var waistMeasure = "";
var hipsMeasure = "";
var small = "small";
var medium = "medium";
var large = "large";
var shapeType = "";
if ( bust <= 36 ) { bustMeasure = small; }
if ( bust <= 44 ) { bustMeasure = medium; }
if ( bust >= 45 ) { bustMeasure = large; }
if ( waist <= 34 ) { waistMeasure = small; }
if ( waist <= 41 ) { waistMeasure = medium; }
if ( waist >= 42 ) { waistMeasure = large; }
if ( hips <= 39 ) { hipsMeasure = small; }
if ( hips <= 47 ) { hipsMeasure = medium; }
if ( hips >= 48 ) { hipsMeasure = large; }
var highestValue = Math.max(bust, waist, hips);
var lowestValue = Math.min(bust, waist, hips);
var difference = highestValue - lowestValue;
if ( difference <= 5 ){
shapeType = "Rectangle";
}
if (waist - bust > 5 && hips - bust > 5) {
shapeType = "Triangle";
}
if (bust - waist > 5 && hips - waist > 5) {
shapeType = "Hourglass";
}
if (waist - bust > 5 && waist - hips > 5) {
shapeType = "Inverted Triangle";
}
if (hips - waist > 5 && hips - bust > 5) {
shapeType = "Triangle";
}
if (bust - hips > (hips / 20)) {
shapeType = "Inverted Triangle";
}
if ((bust - hips <= ( hips / 20)) && (waist > (bust * '.75'))) {
shapeType = "Rectangle";
}
if (hips - bust > (bust/20)) {
shapeType = "Triangle";
}
if ((waist <= (bust * '.75') && waist <= (hips * '.75'))) {
shapeType = "Hourglass";
}
$scope.shapeType = shapeType;
}
}]);
// End Stats Controller
// END APP
答案 0 :(得分:0)
这是一种使用工厂从另一个控制器调用控制器功能的方法。
$scope.$watchCollection(function() { return CustomService; }, function(o, n){
if(n.showMsg === true){
showMessage("Success");
}
});