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

Use Modal as a template view and reference to it

本文关键字：视图 引用 模态      更新时间：2023-09-26

我有模态代码（下面）包装在导航中.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 的文件并将其包含在导航中时.html通过 

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

我绝对将其包含在 ng 控制器div 中。

在测试中，我收到无法引用控制器的用户密码的错误。控制器以前工作正常，我没有对其进行任何更改。对于这个问题，我发布了模态和控制器代码的简化版本。

$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 = "/";
      }
    });
  }
}

如何正确引用它们？

看起来您可能会在创建另一个作用域时看到ng-include出现问题，并且无法引用以前定义的用户对象。

避免与作用域混淆的一种方法是使用"控制器作为"语法专门引用作用域（请参阅 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>

使用"控制器作为"确实有助于解决您遇到的范围问题，但需要对原始控制器进行一些重新加工。

相关文章：