Angular 1 个组件与指令定义
Angular 1 component vs directive definition
我是 node.js 的新手,我正计划将我们的 angular 1 指令迁移到组件,以便更轻松地过渡到 Angular 2。
所以,我的问题是我有一些代码可以处理如下几个定义:
'use strict';
var angular = require('angular');
angular.module('dashboard')
.directive('yepNope', require('./yep-nope.directive'))
//.component('comp', require('./myFirstComponent.component'));
.component('comp', new (require('./myFirstComponent.component')));
yep-nope.directive和MyFirstComponent.component的定义是一样的:
'use strict';
function MyFirstComponent() {
function componentController($element){
var vm = this;
init();
function init(){
vm.api = {
bar : function(){
console.log('bar called');
},
foo : function(){
console.log('foo called');
}
};
}
this.$onInit = function(){
console.log("$onInit");
};
this.$postLink = function(){
console.log("$postLink");
};
this.$onChanges = function(changesObj){
console.log("$onChanges");
};
}
return {
bindings: { },
controller: componentController,
//controllerAs: '$ctrl',
template:'<div><h1>My Component header</h1></div>'
}
}
module.exports = MyFirstComponent;
和
'use strict';
function YepNopeDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.$watch(attrs.check, function (val) {
var words = val ? 'Yep' : 'Nope';
element.text(words);
});
}
}
}
module.exports = YepNopeDirective;
是否有任何解释为什么定义组件我需要做一个新的(要求...而使用指令则不需要?
.directive('yepNope', require('./yep-nope.directive'))
//.component('comp', require('./myFirstComponent.component'));
.component('comp', new (require('./myFirstComponent.component')));
谢谢,
大卫.
你根本不需要要求:
.directive('yepNope', YepNopeDirective);
如果您确实需要,您可能需要检查您的项目架构。
您没有将指令转换为组件。
您使用 .component
将应用程序转换为组件架构,但 directives stay directives
我回答我自己的问题。
组件的定义方式与传统指令不同。指令需要一个函数,而组件需要一个选项对象:
app.directive(name, fn)
app.component(name, options)
我是 node.js 的新手,我正计划将我们的 angular 1 指令迁移到组件,以便更轻松地过渡到 Angular 2。
所以,我的问题是我有一些代码可以处理如下几个定义:
'use strict';
var angular = require('angular');
angular.module('dashboard')
.directive('yepNope', require('./yep-nope.directive'))
//.component('comp', require('./myFirstComponent.component'));
.component('comp', new (require('./myFirstComponent.component')));
yep-nope.directive和MyFirstComponent.component的定义是一样的:
'use strict';
function MyFirstComponent() {
function componentController($element){
var vm = this;
init();
function init(){
vm.api = {
bar : function(){
console.log('bar called');
},
foo : function(){
console.log('foo called');
}
};
}
this.$onInit = function(){
console.log("$onInit");
};
this.$postLink = function(){
console.log("$postLink");
};
this.$onChanges = function(changesObj){
console.log("$onChanges");
};
}
return {
bindings: { },
controller: componentController,
//controllerAs: '$ctrl',
template:'<div><h1>My Component header</h1></div>'
}
}
module.exports = MyFirstComponent;
和
'use strict';
function YepNopeDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.$watch(attrs.check, function (val) {
var words = val ? 'Yep' : 'Nope';
element.text(words);
});
}
}
}
module.exports = YepNopeDirective;
是否有任何解释为什么定义组件我需要做一个新的(要求...而使用指令则不需要?
.directive('yepNope', require('./yep-nope.directive'))
//.component('comp', require('./myFirstComponent.component'));
.component('comp', new (require('./myFirstComponent.component')));
谢谢,
大卫.
你根本不需要要求:
.directive('yepNope', YepNopeDirective);
如果您确实需要,您可能需要检查您的项目架构。
您没有将指令转换为组件。
您使用 .component
将应用程序转换为组件架构,但 directives stay directives
我回答我自己的问题。
组件的定义方式与传统指令不同。指令需要一个函数,而组件需要一个选项对象:
app.directive(name, fn)
app.component(name, options)