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中是绝对的。

在测试时，我收到错误，无法引用Controller的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”将真正帮助解决您所拥有的范围问题，但需要对原始控制器进行一些重新设计。

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

1 个答案: