在这里完成Angular新手。我在这里托管了应用https://bitbucket.org/builtbyvern/ultimate-angularjs-course/src并且一直在关注教程。我让我使用controllerAs重构应用程序。
应用确实有效,直到我点击ng-repeat。没有错误返回...只是注释了ng-repeat:
<!-- ngRepeat: classified in vm.classifieds -->
代码如下,但可以随意查看bitbucket链接。
<md-card flex="30" ng-repeat="classified in vm.classifieds | filter:classifiedsFilter | filter:category" class="classified">
...
<md-card>
控制器:
(function(){
"use strict";
angular
.module('ngClassifieds')
.controller('classifiedsCtrl', function($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog, $stateParams) {
// vm for view model
var vm = this;
vm.openSidebar = openSidebar;
vm.closeSidebar = closeSidebar;
vm.saveClassified = saveClassified;
vm.editClassified = editClassified;
vm.saveEdit = saveEdit;
vm.deleteClassified = deleteClassified;
vm.classifieds;
vm.categories;
vm.editing;
vm.classified;
classifiedsFactory.getClassifieds().then(function(classifieds) {
vm.classifieds = classifieds.data;
vm.categories = getCategories(vm.classifieds);
});
var contact = {
name: "Vern",
phone: '208.283.6343',
email: 'vernworldwide@gmail.com'
}
function openSidebar() {
$mdSidenav('left').open();
}
function closeSidebar() {
$mdSidenav('left').close();
}
function saveClassified(classified) {
if (classified) {
classified.contact = contact;
vm.classifieds.push(classified);
vm.classified = {};
vm.closeSidebar();
showToast('Classified Saved!');
}
}
function editClassified(classified) {
vm.editing = true;
openSidebar();
vm.classified = classified;
}
function saveEdit(classified) {
vm.editing = false;
vm.classified = {};
closeSidebar();
showToast("Edit Saved!");
}
function deleteClassified(event, classified) {
var confirm = $mdDialog.confirm()
.title('Are your sure you want to delete ' + classified.title + '?')
.ok("Yep")
.cancel('Nope').
targetEvent(event);
$mdDialog.show(confirm).then(function(){
var index = vm.classifieds.indexOf(classified);
vm.classifieds.splice(index, 1);
}, function(){
});
}
function showToast(message){
$mdToast.show(
$mdToast.simple()
.content(message)
.position('top, right')
.hideDelay(3000)
);
}
function getCategories(classifieds) {
var categories = [];
angular.forEach(classifieds, function(item) {
angular.forEach(item.categories, function(category){
categories.push(category);
});
});
return _.uniq(categories);
}
});
})();
当然还有配置
angular
.module("ngClassifieds",['ngMaterial', 'ui.router'])
.config(function($mdThemingProvider, $stateProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider
.state('classifieds', {
url: '/classifieds',
templateUrl: 'components/classifieds/classifieds.tpl.html',
controllerAs: 'classifiedsCtrl as vm'
});
});