AngularJS控制器
[英]AngularJS Controllers
問題描述
我已經使用UIrouter嵌套了視圖。 下面是我現在擁有的代碼，該代碼無法正常工作。 我想知道哪里出錯了。
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：
<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：
{{condition}}
這是在嵌套視圖中調用函數的正確方法嗎？ 如果有人可以幫助，將不勝感激。
4 個解決方案
解決方案1
0 2016-05-19 06:21:49
我已經按照您的要求編寫了工作示例，請嘗試一下
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：
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：
{{condition}}
我希望它能解決您的問題。
干杯！！！
解決方案2
0 2016-05-19 10:18:17
您是否考慮過刪除html.submit的控制器分配？
您已經使用相同的控制器包裝了模板，即處理兩種狀態。
解決方案3
-1 2016-05-19 05:17:12
除了使用ng-click ，還可以在state()方法定義中使用resolve param來獲取數據。
您的控制器如下所示：
app.controller('MyCtrl', function($scope){
$scope.submit = function(){
//do processing logic
$state.go('state1');
};
});
您的狀態定義如下所示：
.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
由於您只有一個控制器，因此代碼很好。 我認為您可能已經注意到angular.module（'yapp'）。 這應該是angular.module（'Myapp'）。
當您將另一個控制器聲明為父狀態時，就會發生棘手的事情。 您可以從子控制器訪問父控制器中的所有功能。 但是父級無法訪問子級控制器中聲明的函數或變量。
AngularJS承諾和嵌套控制器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.