ngView 中的模板调用不支持 angular 指令 stackoverflow

Question

我的问题涉及如何在 AngularJS 应用程序中 ngView 中调用的模板中使用 AngularJS directives。

定义：
该应用程序是单页的，因此它加载了一个 index.html，其中包含 DOM 中具有 ng-view 属性的 div 元素（模板 url）。

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" 在单击 link <a href="#/page1">Page 1</a>

时在 ngView 中调用时不起作用

如有任何帮助，我们将不胜感激。谢谢

Answer 1

当您单击 <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.

PS：尝试在 html 上进行插值，以便您可以查看值，（例如 LoginProfile: {{LoginProfile}}）

Answer 2

没有看到您的 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>

ngView 中的模板调用不支持 angular 指令 stackoverflow

template call inside ngView not support angular directive stackoverflow

javascript

angularjs

angularjs-directive

ng-view