AngularJS控制器
[英]AngularJS Controllers
问题描述
I have nested views using UIrouter. 
我已经使用UIrouter嵌套了视图。 Below is the code I have right now, which is not working. 下面是我现在拥有的代码，该代码无法正常工作。 I want to know where this has went wrong. 我想知道哪里出错了。
app.js app.js
angular.module('Myapp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
.state('main', {
url: '/main',
templateUrl: 'main.html',
})
.state('main.submit', {
url: '/submit',
templateUrl: '/main-submit.html',
controller: 'MyController'
});
angular.module('Myapp')
.controller('MyController', function ($scope, $http) {
$scope.click = function () {
$http.get("URL")
.success(function (response) {
$scope.condition = response.Data
}};
main.html: main.html：
<div ng-controller="MyController">
<a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a></div>
<ui-view></ui-view>
main-submit.html: main-submit.html：
{{condition}}
Is this the right way to call a function in nested view or not?? 这是在嵌套视图中调用函数的正确方法吗？ Will be grateful if anyone can help. 如果有人可以帮助，将不胜感激。
4 个解决方案
解决方案1
0 2016-05-19 06:21:49
I have written working example as per your requirement, try it 我已经按照您的要求编写了工作示例，请尝试一下
index.html: index.html：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
<script>
angular.module('Myapp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'main.html'
})
.state('main.submit', {
url: '/submit',
templateUrl: 'main-submit.html',
controller: 'MyController'
});
})
.controller('MyController', function ($scope, $http) {
$scope.click = function () {
$scope.condition = 'Condition!!!!!!!!';
};
});
</script>
</head>
<body ng-app="Myapp">
<div ui-view></div>
</body>
</html>
main.html: main.html：
Home Page YaHoo!!!!!!
<div ng-controller="MyController">
<a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a>
<div ui-view></div>
</div>
main-submit.html: main-submit.html：
{{condition}}
I hope it would solve your problem. 我希望它能解决您的问题。
Cheers!!! 干杯！！！
解决方案2
0 2016-05-19 10:18:17
Have you thought about removing the controller assignment for html.submit ? 您是否考虑过删除html.submit的控制器分配？
Your'e already wrapping you're template with the same controller, that is handling both states. 您已经使用相同的控制器包装了模板，即处理两种状态。
解决方案3
-1 2016-05-19 05:17:12
Instead of using ng-click , use resolve param in the state() method definition to fetch the data. 除了使用ng-click ，还可以在state()方法定义中使用resolve param来获取数据。
Your controller would look like this: 您的控制器如下所示：
app.controller('MyCtrl', function($scope){
$scope.submit = function(){
//do processing logic
$state.go('state1');
};
});
And your state definition would look like this: 您的状态定义如下所示：
.state( 'state1', {
url: '/state1',
views: {
"content": {
templateUrl: 'pages/state1.html',
controller: 'State1Ctrl',
resolve: {
state1Data: function(){return $http.get(/*whatever*/);}
}
}
}
})
解决方案4
-1 2016-05-19 05:41:00
Since you have only one controller the code is fine. 由于您只有一个控制器，因此代码很好。 I think you may have noticed angular.module('yapp'). 我认为您可能已经注意到angular.module（'yapp'）。 This should be angular.module('Myapp'). 这应该是angular.module（'Myapp'）。
When you declare one more controller to the parent state then the trickier things happens. 当您将另一个控制器声明为父状态时，就会发生棘手的事情。 You can access all the functions that are there in the parent controller from child controller. 您可以从子控制器访问父控制器中的所有功能。 But the parent cannot access the functions or variables declared in the child controller. 但是父级无法访问子级控制器中声明的函数或变量。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.