$stateprovider не работает - AngularJS
Я собираюсь передать одно значение контроллера-HTML в другой контроллер-HTML, но он работает нормально, но вывод не отображается,
Я новичок в angularjs, я не в состоянии понять концепцию $stateprovider. Я хочу создать заголовок, который имеет меню и логотип, а содержание тела должно меняться при нажатии на соответствующие пункты меню, код указан ниже, пожалуйста, проверьте и ответьте мой запрос
Я пытался получить данные одного HTML в другой HTML.
Мой код ниже...
var mainMod = angular.module('MainApp', ['ui.router']);
mainMod.controller('MainCtrl', ['$scope','dataShare','$window','$state',
function ($scope,dataShare,$state,$window) {
$scope.text =[
{
"text1": "23219168",
"text2": "00:04:3E:9C:D4:89"
},
{
"text1": "23194767",
"text2": "00:04:3E:9C:D7:5C"
}
];
$scope.send = function(index){
dataShare.sendData($scope.text[index]);
console.log=$scope.text[index];
$scope.userInput="Afsar Bhai";
$state.go("second", { id: $scope.userInput });
};
}
]);
mainMod.controller('MainCtrl2', ['$scope','dataShare','$window','$state','$stateParams',
function ($scope,dataShare,$state, $stateParams,$window) {
$scope.id = $stateParams.id;
$scope.test="0000000000";
$scope.$on('data_shared',function(){
var text = dataShare.getData();
$scope.text = text;
});
}
]);
mainMod.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'Test2.html'
})
.state('second', {
url: '/second/:id',
templateUrl: 'Test2.html'
})
});
mainMod.factory('dataShare',function($rootScope){
var service = {};
service.data = false;
service.sendData = function(data){
this.data = data;
$rootScope.$broadcast('data_shared');
};
service.getData = function(){
return this.data;
};
return service;
});First HTML....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Pass Values from One Controller to Another Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="test.js">
</script>
</head>
<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<h4>Ctrl1</h4>
<div>{{text}}</div>
<p>{{text.text1}}</p>
<p>{{text.text2}}</p>
<table>
<tr>
<td><p>text1</p></td>
<td><p>text2</p></td>
<td><p>ok</p></td>
</tr>
<tr ng-repeat="itemL2 in text">
<td>{{itemL2.text1}}</td>
<td>{{itemL2.text2}}</td>
<td>{{$index}}</td>
<td><button type='button' ng-click='send($index);'>Send Data</button></td>
</tr>
</table>
{{userInput}}
</div>
</div>
<div ng-controller='MainCtrl2'>
<div>
<h4>Ctrl2</h4>
<input type='text' ng-model='text.text1' />
<input type='text' ng-model='text.text2' />
<div>text1:{{text}}</div>
<div>text2:{{text[3].text2}}</div>
</div>
</div>
</body>
</html>
Second HTML....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Pass Values from One Controller to Another Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="test.js">
</script>
</head>
<body ng-app='MainApp'>
<div ng-controller='MainCtrl2'>
<div>
<h4>Ctrl2</h4>
<input type='text' ng-model='text.text1' />
<input type='text' ng-model='text.text2' />
<div>text1:{{text.length}}</div>
<div>text2:{{text}}</div>
<br>test:--
{{test}}
</div>
</div>
</body>
</html>