使用 Modal 作为模板视图并引用它

Question

我在 nav.html 中包含了模态代码（如下），它按预期工作（登录、注销...工作）。

  <div class="modal fade" id="authModal" role="dialog">

<!-- Modal content-->
<div class="modal-content">              
  <div class="modal-body">
    <form class="form-signin" role="form">
      <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus="">
      <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required="">
      <div class="checkbox checkbox-success">
        <input ng-model="checkbox.signup" ng-init="checkbox.signup=false" type="checkbox">
        <label> Sign Up for first-timer </label>
      </div>
      <div class="text-center">
      <button ng-click="login($event)" class="btn btn-lg btn-primary" type="button">Sign In</button>
      </div>
    </form>
  </div>
</div>

但是当我将所有模态内容移动到名为 md.html 的文件并通过

将其包含到 nav.html 中时

<div class="navbar-header" ng-controller="MainCtrl">
   <div ng-include="'views/modals/md.html'"></div>
</div>

我绝对将它包含在 ng-controller div 中。

在测试中，我得到了无法引用控制器的 user.password 的错误。控制器之前工作正常，我没有更改任何内容。对于这个问题，我发布了模态和控制器代码的简化版本。

$scope.login = function($event){ $event.preventDefault();
  // console.log("cond ", cond, ".checkbox.signup ", $scope.checkbox.signup);
  if (!$scope.logged)
  fn.login($scope.user, function(){
    if ($scope.checkbox.signup) fn.signup($scope.user);
  });
};
var fn = {
login: function(user, cb){
    if (Auth.authData) return;

    if (!user.password) {
      fn.alert("please type password");
      return;
    }
    if (fn.valid_email(user.email))
    Auth.ref_ds1.authWithPassword(user, function(error, authData) {
      if (error) {
        fn.alert(error);
        cb();
      } else {
        authData.email = $scope.user.email;
        console.log("Authenticated successfully on:", authData.email);
        fn.greet("Hello " + authData.email.split("@")[0]);
        $scope.logged = true;
        window.location.href = "/";
      }
    });
  }
}

如何正确引用它们？

Answer 1

您的 ng-include 创建另一个范围时可能会遇到问题，并且您无法引用之前定义的用户对象。

避免与范围混淆的一种方法是使用“Controller as”语法来专门引用范围（请参阅http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/）。这是一个小例子：

// in the controller
app.controller('MainController', function() {
    var vm = this;

    this.somevalue = 'something';
})

// markup
<div ng-controller="MainCtrl as ctrl">
  {{ ctrl.somevalue }}

  <div ng-controller="SecondCtrl as secondCtrl">
      {{ ctrl.somevalue }}
      {{ secondCtrl.anothervalue }}
  </div>
</div>    

使用“Controller as”确实有助于解决您遇到的范围问题，但需要对您的原始控制器进行一些重新设计。