8
我是Ionic和AugularJS的新手，在設置頁面的第三個標籤搜索選項上單擊複選框/單選按鈕時，我遇到了打開模式框的問題。我已經包含一個ng-controller和ng-click採取行動。我看着在調試器，它顯示一個錯誤：點擊時如何打開離子模態？
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
我知道，404未找到意味着它沒有找到templateUrl但每次導航頁面我是在index.html，然後他們做工精細app.js文件中的hashtag-modal.html除外。爲什麼它不工作，我該如何解決這個問題？
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
};
}]);
// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
的index.html
<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Settings" hide-back-button="false">
<ion-content class="padding">
<!-- The content of the page -->
<p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
</p>
<div class="settings-list">
<label class="item item-radio">
<input type="radio" name="settings-group" value="recent">
<div class="item-content">
Recent
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="settings-group" value="popular">
<div class="item-content">
Most Popular
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
</ion-view>
</script>
<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
<ion-modal-view hide-back-button="false">
<ion-header-bar>
<h1 class="title">Hashtag Search</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-content>
</ion-modal-view>
</script>
修訂app.js
我加入$ionicModal至hashtagController，但據說是Error: $ionicModal is undefined。還有哪些地方沒有定義？
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
}
}]);
修訂標籤
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
我編輯並更新了修訂版，但點擊不起作用，因爲'錯誤：$ ionicModal未定義' – TheAmazingKnight 2014-12-04 18:03:25
您必須在控制器中注入$ ionicModal。檢查我的更新代碼。 – 2014-12-05 09:00:55