Yeoman Mean.js 生成的自定义 AngularJS 指令无效
Yeoman Mean.js generated custom AngularJS directive not working
提前感谢您的帮助,我知道这可能是一个简单的问题,但我已经研究了一段时间,无法弄清楚我做错了什么。
上下文信息
我正在尝试为 AngularJS 实现一个简单的自定义指令。我的网页是使用 Mean.js 样板构建的。为了为我的用户模块生成自定义指令,我通过执行此命令使用了 Yeoman 生成器,
yo meanjs:angular-directive compareTo
然后我指定我想要将指令放置在我的用户模块中。这生成了一个带有示例自定义指令的指令目录。这是我的文件夹结构。
http://imgur.com/SZvG706
(我还不能 post 图片,抱歉)
问题
我的理解是,这应该创建一个带有文本 "this is the compareTo directive" 的 h1 属性,并打印一条控制台消息,但我什么也没看到,也没有在控制台中收到任何错误。
代码
这是生成的比较指令文件。我唯一更改的是 div 到模板中的 h1 并添加了控制台 hi 消息。
'use strict';
angular.module('users').directive('compareTo', [
function() {
return {
template: '<h1></h1>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
// Compare to directive logic
// ...
console.log('hi');
element.text('this is the compareTo directive');
}
};
}
]);
这是我的 signup.client.view.html 文件,我在其中尝试使用 compare-to html 标记来实现指令。
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign up with you email</h3>
<compare-to></compare-to>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
<form name="userForm" data-ng-submit="signup()" class="signin form-horizontal" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" required id="firstName" name="firstName" class="form-control" data-ng-model="credentials.firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="credentials.lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="organization">Organization Name</label>
<input type="text" id="organization" name="organization" class="form-control" data-ng-model="credentials.organization" placeholder="Organization Name">
</div>
<div class="form-group">
<label for="position">Position Title</label>
<input type="text" id="position" name="position" class="form-control" data-ng-model="credentials.position" placeholder="Position within organization">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-control" data-ng-model="credentials.email" placeholder="Email">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" data-ng-model="credentials.password" placeholder="Password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" data-ng-model="confirmPassword" compare-to="credentials.password" placeholder="Confirm Password">
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
<a href="/#!/signin" class="show-signup">Sign in</a>
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
再次感谢!
所以这个问题真的很愚蠢。我所做的就是关闭我的节点服务器实例并重新运行 grunt,我认为我不需要这样做,因为 mean.js 会在您每次进行更改时自动重新编译。但我想有时你需要重新启动它。
提前感谢您的帮助,我知道这可能是一个简单的问题,但我已经研究了一段时间,无法弄清楚我做错了什么。
上下文信息
我正在尝试为 AngularJS 实现一个简单的自定义指令。我的网页是使用 Mean.js 样板构建的。为了为我的用户模块生成自定义指令,我通过执行此命令使用了 Yeoman 生成器,
yo meanjs:angular-directive compareTo
然后我指定我想要将指令放置在我的用户模块中。这生成了一个带有示例自定义指令的指令目录。这是我的文件夹结构。 http://imgur.com/SZvG706 (我还不能 post 图片,抱歉)
问题
我的理解是,这应该创建一个带有文本 "this is the compareTo directive" 的 h1 属性,并打印一条控制台消息,但我什么也没看到,也没有在控制台中收到任何错误。
代码
这是生成的比较指令文件。我唯一更改的是 div 到模板中的 h1 并添加了控制台 hi 消息。
'use strict';
angular.module('users').directive('compareTo', [
function() {
return {
template: '<h1></h1>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
// Compare to directive logic
// ...
console.log('hi');
element.text('this is the compareTo directive');
}
};
}
]);
这是我的 signup.client.view.html 文件,我在其中尝试使用 compare-to html 标记来实现指令。
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign up with you email</h3>
<compare-to></compare-to>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
<form name="userForm" data-ng-submit="signup()" class="signin form-horizontal" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" required id="firstName" name="firstName" class="form-control" data-ng-model="credentials.firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="credentials.lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="organization">Organization Name</label>
<input type="text" id="organization" name="organization" class="form-control" data-ng-model="credentials.organization" placeholder="Organization Name">
</div>
<div class="form-group">
<label for="position">Position Title</label>
<input type="text" id="position" name="position" class="form-control" data-ng-model="credentials.position" placeholder="Position within organization">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-control" data-ng-model="credentials.email" placeholder="Email">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" data-ng-model="credentials.password" placeholder="Password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" data-ng-model="confirmPassword" compare-to="credentials.password" placeholder="Confirm Password">
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
<a href="/#!/signin" class="show-signup">Sign in</a>
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
再次感谢!
所以这个问题真的很愚蠢。我所做的就是关闭我的节点服务器实例并重新运行 grunt,我认为我不需要这样做,因为 mean.js 会在您每次进行更改时自动重新编译。但我想有时你需要重新启动它。