我的script.js中有一个数组,例如:
$scope.companies = [
{
id: '1',
contact: 'John',
address: 'Some street, United States',
function: 'Client',
telephone: '0123455858446',
fax: '0128289385',
url: 'http://www.example.com'
},
];
然后有一个表单向数组添加一个新项目 - 一旦提交表单,它就会创建自己的数组项,然后将其“推送”到旧数组。
然后console.log打印出已完成的数组,它包含所有数据。
但是,如果我然后浏览到另一个页面,它在表格中显示数据,它不会显示它 - 并且它没有将数组项目添加到script.js。
我该怎么做?
的script.js:
// Define a new module for our app
var app = angular.module("myApp", ['ngRoute', 'UserApp']);
var appName = 'My App';
// Config the route
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'dashboard.html',
controller: 'DashboardController',
public: false
}).
when('/companies', {
templateUrl: 'companies.html',
controller: 'CompaniesController',
public: false
}).
when('/companies/add', {
templateUrl: 'add-company.html',
controller: 'CompaniesController',
public: false
}).
when('/login', {
templateUrl: 'login.html',
controller: 'LoginController',
login: true
}).
when('/management/create-user', {
templateUrl: 'management/create-user.html',
public: false
}).
when('/account/edit/:userid', {
templateUrl: 'account/edit.html',
controller: 'EditAccountController',
public: false
}).
when('/profile/:userid', {
templateUrl: 'account/profile.html',
controller: 'ProfileController',
public: false
}).
otherwise({
templateUrl: '404.html'
});
$locationProvider.html5Mode(true);
}]);
app.run(function(user) {
user.init({ appId: 'REMOVED' });
});
app.controller("DashboardController", function($scope) {
$scope.title = 'Dashboard';
});
app.controller("CompaniesController", ['$scope', function($scope) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.add = function(newCompany) {
$scope.companyData = [
{
id: newCompany.id,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
}
];
console.log(newCompany);
console.log($scope.companyData);
console.log($scope.companies);
$scope.companies.push.apply($scope.companies, $scope.companyData);
};
$scope.companies = [
{
id: '1',
contact: 'John',
address: 'Some street, United States',
function: 'Client',
telephone: '0123455858446',
fax: '0128289385',
url: 'http://www.example.com'
},
];
}]);
app.controller('GlobalController', ['$scope', function($scope) {
$scope.appName = "My App";
}]);
app.controller("LoginController", function($scope) {
$scope.title = 'Login';
});
app.controller('EditAccountController', ['$scope' ,'$routeParams', function($scope, $routeParams) {
$scope.title = 'Edit Account';
$scope.update = function(userAccount) {
UserApp.User.save({
"user_id": $routeParams.userid,
"first_name": userAccount.first_name,
"last_name": userAccount.last_name,
"email": userAccount.email,
"properties": {
"phone": userAccount.phone
}
}, function (error, result) {
if (result) {
$scope.$apply(function () {
$scope.saveUser = 'Your account has been updated.';
})
} else if (error) {
$scope.saveUser = "Something went wrong. Please try again!";
}
else {
$scope.saveUser = "Something went wrong. Please try again!";
}
});
}
}]);
app.controller('ProfileController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.title = 'Profile';
UserApp.User.get({
"user_id": $routeParams.userid
}, function(error, result){
// Handle error/result
if (result) {
$scope.$apply(function(
) {
$scope.getUser = result[0]
})
} else if (error) {
$scope.getUser = error
}
});
}]);
添加-company.html:
<div class="row">
<div class="col-md-12">
<h1>{{ title_sub }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Add a new company.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<label>ID</label><input type="text" name="id" id="id" ng-model="newCompany.id" tabindex="1" class="form-control">
<label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
<label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
<label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
<label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
<label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
<label>URL</label></lab><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="add-submit" id="add-submit" tabindex="10" ng-click="add(newCompany)" class="form-control btn btn-primary" value="Add Company">
<br>
<div class="text-center">
<p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
编辑:新控件:
app.controller("CompaniesController", ['$scope', 'companyService', function($scope, companyService) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.add = function(newCompany) {
companyService.addCompany( {
id: newCompany.id,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
});
};
$scope.companies = companyService.getCompanies();
}]);
答案 0 :(得分:1)
使用服务的示例,您必须在每个控制器中“注入”服务,就像我在EditAccountController中做的那样
app.service('companyService',[function(){
var companies = [];
return {
addCompany: function(company){
companies.push(company);
},
getCompanies: function(){
return companies;
}
}
}]);
app.controller('EditAccountController', ['$scope', 'companyService', function($scope, companyService){
$scope.companies = companyService.getCompanies();
}]);
答案 1 :(得分:0)
您是指在提交数据并将其保存到阵列后浏览到其他页面?
如果您转到另一个页面,您将丢失Javascript在上一页中的内存,为了保存数据,您可以使用sessionStorage或localStorage
单向可能是这个
$scope.origData = [];
$scope.addData = function(data){
$scope.origData.push(data);
localStorage.setItem('storedData', $scope.origData);
}
我在这里使用原生的javascript localStorage对象来访问数据库,但是有一个模块以角度方式ngStorage处理存储(阅读相关内容)
使用本机localStorage对象,您将能够使用此对象访问项目中任何页面中的数据。
$scope.dataOnPreviousPage = localStorage.getItem('storedData')
答案 2 :(得分:0)
如何将数组放入$ rootScope?
$rootScope.companies = [
{
id: '1',
contact: 'John',
address: 'Some street, United States',
function: 'Client',
telephone: '0123455858446',
fax: '0128289385',
url: 'http://www.example.com'
},
];