0
Ich bin neu bei AngularJS und versuche, eine einfache Einseiten-App zu erstellen. Alles hat perfekt funktioniert, aber dann habe ich Zustände mit $ stateProvider hinzugefügt und wenn ich auf die Knöpfe klicke, die Funktionen zugewiesen haben, passiert nichts, als ob es ein Problem in den Controllern gäbe. Ich freue mich, wenn Sie mir helfen können. Der Code mag ruhig lang sein, aber ich kann mich nicht weiter fortbewegen. Hier ist der Code:Einzelseiten-App funktioniert nach dem Routing nicht mehr
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet" />
<link href="node_modules/angular-material/angular-material.css" rel="stylesheet" />
<link href="node_modules/mdi/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="styles/customMaterial.css" rel="stylesheet" />
</head>
<body ng-app="ngClassifieds">
<ui-view></ui-view>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
<script src="classifiedsCtrl.js"></script>
<script src="components/classifieds/classifieds.fac.js"></script>
<script src="components/classifieds/new/newClassified.ctr.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
</body>
</html>
classifieds.tpl.html
<md-toolbar>
<div class="md-toolbar-tools">
<p>Pixo</p>
<md-button ng-click="vm.openSidenav()">
<md-icon class="mdi mdi-plus-circle"></md-icon>
Add new
</md-button>
<md-button ng-click="filtering = !filtering">
<md-icon class="mdi mdi-magnify"></md-icon>
Filter
</md-button>
</div>
</md-toolbar>
<ui-view></ui-view>
<div class="filters" layout="row" layout-align="center center" ng-show="filtering">
<md-input-container style="margin-top:43px">
<label>Enter search term</label>
<input type="text" ng-model="filter" />
</md-input-container>
<md-input-container>
<label>Category</label>
<md-select ng-model="category" placeholder="Select a category">
<md-option ng-repeat="category in vm.categories" value="{{category}}" ng-bind="category"></md-option>
</md-select>
</md-input-container>
<md-input-container>
<md-button class="md-warn" ng-click="category='';filter=''">
Clear <md-icon class="mdi mdi-backspace"></md-icon>
</md-button>
</md-input-container>
</div>
<md-content class="md-padding" layout="row" layout-wrap>
<md-card flex="30" ng-repeat="classified in vm.classifieds | filter:filter
|filter: category" class="classified">
<img ng-src="{{classified.img}}" alt="phone" style="height:300px !important" />
<md-card-content>
<div class="classified-info" ng-show="!showContact">
<h2 class="md-title" ng-bind="classified.title"></h2>
<h3 ng-bind="classified.price | currency:'€'"></h3>
<p ng-bind="classified.description">
</p>
</div>
<div class="classified-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon><span ng-bind="classified.contact.name"></span></p>
<p><md-icon class="mdi mdi-phone"></md-icon><span ng-bind="classified.contact.phone"></span></p>
<p><md-icon class="mdi mdi-email"></md-icon><span ng-bind="classified.contact.email"></span></p>
</div>
<div layout="row">
<md-button ng-click="showContact = true" ng-show="!showContact">Contact</md-button>
<md-button ng-click="showContact = false" ng-show="showContact">Details</md-button>
<md-button ng-click="showAdmin = true" ng-show="!showAdmin">Admin</md-button>
<md-button ng-click="showAdmin = false" ng-show="showAdmin">Cancel</md-button>
</div>
<div class="row" ng-show="showAdmin">
<md-button class="md-primary" ng-click="vm.editClassified(classified)">EDIT</md-button>
<md-button class="md-warn" ng-click="vm.deleteClassified($event,classified)">DELETE</md-button>
</div>
</md-card-content>
</md-card>
</md-content>
newClassified.tpl.html
<md-sidenav md-component-id='left' class="md-sidenav-left">
<md-toolbar>
<h2 class="md-toolbar-tools">Add new</h2>
</md-toolbar>
<md-content class="md-padding">
<form>
<md-input-container>
<label for="title">Title</label>
<input type="text" autofocus ng-model="classified.title" />
</md-input-container>
<md-input-container>
<label for="price">Price</label>
<input type="text" ng-model="classified.price" />
</md-input-container>
<md-input-container>
<label for="description">Description</label>
<textarea ng-model="classified.description"></textarea>
</md-input-container>
<md-input-container>
<label for="image">Image link</label>
<input type="text" ng-model="classified.image" />
</md-input-container>
<md-button class="md-primary" ng-click="vm.saveClassified(classified)" ng-if="!vm.editing">SAVE</md-button>
<md-button class="md-primary" ng-if="vm.editing" ng-click="vm.saveEdit()">SAVE EDIT</md-button>
<md-button class="md-warn" ng-click="vm.closeSidenav()">CANCEL</md-button>
</form>
</md-content>
</md-sidenav>
app.js
angular.module("ngClassifieds", ["ui.router", "ngMaterial"])
.config(function ($mdThemingProvider, $stateProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider.state("classifieds", {
url: '/classifieds',
templateUrl: 'components/classifieds/classifieds.tpl.html',
controller: 'classifieds as vm'
})
.state('classifieds.new', {
url: '/new',
templateUrl: 'components/classifieds/new/newClassified.tpl.html',
controller: 'newClassified as vm'
});
});
classifiedsCtrl.js
(function() {
angular
.module("ngClassifieds")
.controller("classifieds", function ($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog) {
var vm = this;
var classifieds;
vm.openSidenav = openSidenav;
vm.closeSidenav = closeSidenav;
vm.saveClassified = saveClassified;
vm.editClassified = editClassified;
vm.saveEdit = saveEdit;
vm.deleteClassified = deleteClassified;
vm.classifieds;
vm.categories;
vm.editing;
vm.classified;
classifiedsFactory.classifiedsData().then(function (classifieds) {
vm.classifieds = classifieds.data;
vm.categories = getCategories(vm.classifieds);
});
function getCategories(classifieds) {
var categories = [];
angular.forEach(classifieds, function (classified) {
angular.forEach(classified.categories, function (category) {
categories.push(category);
});
});
return _.uniq(categories);
}
function openSidenav() {
$mdSidenav('left').open();
}
function closeSidenav() {
$mdSidenav("left").close();
}
var showSavedToast = function (message) {
$mdToast.show($mdToast.simple()
.content(message).position("right", "top").hideDelay(3000));
}
var contact = {
"name": "John Doe",
"phone": "545 555 655",
"email": "[email protected]"
}
function saveClassified(classified) {
classified.contact = contact;
vm.classifieds.push(classified);
classified = {};
closeSidenav();
showSavedToast("Classified saved");
}
function editClassified(classified) {
vm.editing = true;
vm.classified = classified;
openSidenav();
}
function saveEdit() {
vm.editing = false;
vm.classified = {};
vm.closeSidenav();
showSavedToast("Classified edited");
}
function deleteClassified(event, classified) {
var confirm = $mdDialog.confirm()
.title("Are you sure you want to delete " + classified.title + "?")
.textContent("This item will be deleted permanently")
.ok('Yes')
.cancel('No');
$mdDialog.show(confirm).then(function() {
var index = vm.classifieds.indexOf(classified);
vm.classifieds.splice(index, 1);
}, function() { });
}
});})();
newClassified.ctr.j s
(function() {
angular.module('ngClassifieds')
.controller('newClassified', function ($mdSidenav, $mdDialog, classifiedsFactory, $timeout) {
var vm = this;
$timeout(function() {
$mdSidenav('left').open();
});
});})();
Es ist schön, dass Sie den problematischen Code hinzugefügt, aber wir können nicht helfen, wenn wir Sie bekommen keine Details über den Fehler nicht bekommen. Was sagt es in der Konsole der Entwicklerwerkzeuge des Browsers? – Shade