我的问题涉及如何在AngularJS应用程序中在ngView
内部调用的模板中使用AngularJS directives
。
定义:
该应用程序是单页面的,所以它会在DOM中加载一个index.html,其中包含一个div元素(模板url),并带有ng-view属性。
Main Page(
index.html ) :
<html data-ng-app="App" data-ng-controller="AppCtrl">
<head>
<title>Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- primary nav -->
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/page3">Page 3</a>
<!-- display the view -->
<div ng-view>
</div>
</body>
</html>
app.js:
angular.module('App', [])
.controller('AppCtrl', function($rootScope, appLoading) {
$rootScope.topScope = $rootScope;
$rootScope.$on('$routeChangeStart', function() {
appLoading.loading();
});
})
.config(function($routeProvider) {
$routeProvider.when('/page1', {
controller : 'Page1Ctrl',
templateUrl : 'page1.html'
})
.when('/page2', {
controller : 'Page2Ctrl',
templateUrl : 'page2.html'
})
.when('/page3', {
controller : 'Page3Ctrl',
templateUrl : 'page3.html'
})
.otherwise({
redirectTo: '/home'
});
})
page1.html:
<div class="form">
<form class="login-profile" method="post" action="" name="editfrm">
<input type="text" name="email" value="" id="txtemail" data-ng-model="email" required>
<input type="password" name="password" value="" id="txtpassword" data-ng-model="password" required>
<input type="button" value="Save" name="submit">
</form>
</div>
问题:在ngView
内部调用的模板Url不支持任何AngularJS deirective
。data-ng-model="email"
,data-ng-model="password"
在ngView中调用时不工作,点击链接<a href="#/page1">Page 1</a>
任何帮助将不胜感激。由于
没有看到你的Page1Ctrl
的代码很难告诉,但似乎你正在尝试使用$rootScope
控制器之间共享数据,不是吗?
好吧,不要。为此,可以使用$routeParams
或服务。例如:
// app controller
.controller('AppCtrl', function(User) {
User.set({email:'email', password:'password'}); // set user
})
// page 1 controller
.controller('Page1Ctrl', function($scope, User) {
$scope.user = User.get(); // get user
})
// user service
.service('User', function() {
var user = null;
return {
get: function() {
return user;
},
set: function(val) {
user = val;
}
};
});
及相关HTML
<input type="text"
name="email"
data-ng-model="user.email"
required>
<input type="password"
name="password"
data-ng-model="user.password"
required>
当你点击<a href="#/page1">Page 1</a>
时,它会加载Page1Ctrl
和page1.html
。你确定你不能访问Page1Ctrl
中的$scope.email
和$scope.password
吗?
它应该是可访问的,如果不能,那么尝试创建一个模型对象,如下所示:
$scope.LoginProfile = {
email: '',
password: ''
}
并在page1.html
中使用这个LoginProfile
对象,就像LoginProfile.email
和LoginProfile.password
一样。
LoginProfile: {{LoginProfile}}
)