Question

我是AngularJS的新手，刚刚完成了Angular主页上提到的CodeSchool的Angular入门课程。我试图按照他们创建包含模板和控制器的指令的示例，因为它使index.html非常干净。

然而问题是当我加载index.html页面并单击提交按钮时没有任何反应，因此看起来ng-submit不起作用。但是，当我不使用模板并使用ng-controller指令将login.html中的代码直接放在index.html中时，它工作正常。

我在这里做错了什么？

的index.html

<html>
<head></head>
<body ng-app="plunker">
  <login-page></login-page>
  <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script src="app.js"></script>
</body>
</html>

app.js

var app = angular.module('plunker', []);

app.directive('loginPage', function() {
  return {
    restrict: 'E',
    templateUrl: '/login.html',
    controllerAs: 'login',
    controller: function() {
      var login = this;
      login.display = true;
      login.doLogin = function() {
        console.log('login');
      }
    }
  };
});

的login.html

<form ng-submit="login.doLogin()">
  <input type="text" id="input-user" placeholder="email" />
  <input type="password" id="input-pass"placeholder="password" />
  <button type="submit">Login</button>
</form>

Answer 1

正如AWolf所指出的，templateUrl应该是＆＃34; login.html＆＃34;，而不是＆＃34; /login.html"。

也是在占位符=之前缺少空格的次要类型，但不应该导致任何问题：

<input type="password" id="input-pass"placeholder="password" />

否则这应该有效。我创建了一个说明它工作的傻瓜：http://plnkr.co/edit/yT35qkl7K5ewiDl31DMK?p=preview

在DOM中出现但不显示的指令中定义的模板

1 个答案: