我用自己的角度创建了一个小应用程序并将其投影为状态机，因此必须采取措施来改变状态。通过更改状态我的意思是包括其他.html文件。我使用ng-include在指令中丢失了父范围。我以前读过有关它的主题，但没有什么可以帮助我。我知道，如果我通过ng-include创建范围，那么该范围是作为子项创建的，但我需要我的父范围，以创建范围。$ emit（...）并且真的不知道现在... < / p>
HTML：
<!DOCTYPE html>
<html ng-app="rpsApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rock, Paper, Scissors</title>
<base href="/">
<link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webroot/css/default.css"/>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/gsap/src/minified/TweenMax.min.js"></script>
<script type="text/javascript" src="webroot/js/main.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,800' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main" ng-controller="rpsController as rpsc">
<ng-include src="data.stateData.template.file"></ng-include>
</div>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
main.js
angular.module('rpsApp', []).
service('rpsManager', function(){
var currentState;
var isInit = true;
return {
getState: function(){
return currentState;
},
setState: function(stateValue){
console.log('set state '+stateValue);
if (stateValue > 0) {
currentState = stateValue;
}
},
getInit: function(){
return isInit;
},
setInit: function(initValue){
if (initValue != 'undefined') {
isInit = initValue;
}
}
};
}).
controller('rpsController', function($scope, rpsManager) {
var templatePath = 'templates/';
$scope.data = {};
$scope.data.templates = [
{file: templatePath+'intro.tpl'},
{file: templatePath+'select-item.tpl'},
{file: templatePath+'select-enemy.tpl'},
{file: templatePath+'select-player.tpl'},
{file: templatePath+'game-container.tpl'},
{file: templatePath+'game-results.tpl'}
];
$scope.data.states = [
{stateNo: 1, name: 'Intro', template: $scope.data.templates[0]},
{stateNo: 2, name: 'Type name', template: $scope.data.templates[1]},
{stateNo: 3, name: 'Select game item', template: $scope.data.templates[1]},
{stateNo: 4, name: 'Select enemy', template: $scope.data.templates[2]},
{stateNo: 5, name: 'Select online player', template: $scope.data.templates[3]},
{stateNo: 6, name: 'Waiting for player / computer', template: $scope.data.templates[4]},
{stateNo: 7, name: 'Game result', template: $scope.data.templates[4]},
{stateNo: 8, name: 'View your all game results', template: $scope.data.templates[5]},
];
$scope.$on('stateChange', function(e, data){
console.log('state change');
rpsManager.setState(data);
$scope.data.stateData = _stateSelect(data);
});
if (rpsManager.getInit() == true) {
$scope.$emit('stateChange', 1);
rpsManager.setInit(false);
}
function _stateSelect(stateNo) {
var _stateObj = false;
if (stateNo > 0) {
for (a=0; a<$scope.data.states.length; a++) {
if ($scope.data.states[a].stateNo == stateNo) {
_stateObj = $scope.data.states[a];
}
}
}
return _stateObj;
}
}).
directive('rpsIntro', function(){
console.log('directive online');
return {
scope: true,
transclude: false,
link: function(scope, element, attrs){
console.log('inside link');
TweenMax.staggerTo(".letter", 1, {opacity:1}, 0.3);
TweenMax.to(".word", 1, {opacity:1, onComplete: function(){
scope.$emit('stateChanged', 2);
}}, 1.5).delay(2.4);
}
}
});