我正在为角度1.5风格的组件重构一些角度指令.
我的一些指令具有依赖于某个属性存在的行为,因此没有该属性具有特定的布尔值.使用我的指令,我使用链接功能完成此操作:
link: function(scope,elem,attrs, controller){
controller.sortable = attrs.hasOwnProperty('sortable');
},
我如何使用角度1.5样式的组件语法？
我能做的一件事就是添加一个绑定,但是我需要指定一个布尔值.我想保持模板原样.
使用Angular Translate和$ translate.instant()方法,我构建了AngularJS的select组件,并在语言之间自动切换:
<translated-select
elements="$ctrl.values"
current-value="$ctrl.value"
on-change="$ctrl.setValue(value)"
></translated-select>
{{ $ctrl.value }}
<hr>
<button ng-click="$ctrl.switchToPolish()">
Switch to polish
</button>
<button ng-click="$ctrl.switchToEnglish()">
Switch to english
</button>
正如您在Plunker上看到的那样:Angular JS选择自动翻译.问题是它select在我选择第二个选项之前将s选项显示为undefined.然后一切正常,我可以在英语和波兰语的翻译选项之间切换.我甚至尝试用$onChanges挂钩等待第一次更改,如果发生$digest了更改,请运行$timeout:
this.$onChanges = function (changes) {
if (changes.elements) {
$timeout(function () {
this.values = changes.elements.currentValue;
}.bind(this));
}
if (changes.currentValue) {
$timeout(function () {
this.value = changes.currentValue.currentValue;
}.bind(this));
}
}
但是一次又一次,我必须在select中选择第二个选项才能使其正常工作.我错过了什么吗？如果有人会帮助我,我将不胜感激,谢谢你.
javascript internationalization angularjs angular-translate angularjs-components
AngularJS V1.7.1 *的发布引入了新的ng-ref指令.虽然这个新指令使用户能够轻松地做某些事情,但我发现滥用和问题的可能性很大.
的NG-REF属性告诉AngularJS发布一个组件的控制器上的当前范围.这对于让诸如音频播放器之类的组件将其API暴露给兄弟组件非常有用.它的播放和停止控制可以很容易地访问.
第一个问题是播放器控件在控制器undefined的$onInit功能内.
Initial vm.pl = undefined <<<< UNDEFINED
Sample = [true,false]
对于依赖于可用数据的代码,我们如何解决这个问题？
angular.module("app",[])
.controller("ctrl", class ctrl {
constructor() {
console.log("construct")
}
$onInit() {
console.log("onInit", this.pl);
this.initPL = this.pl || 'undefined';
this.sample = this.pl || 'undefined';
this.getSample = () => {
this.sample = `[${this.pl.box1},${this.pl.box2}]`;
}
}
})
.component("player", {
template: `
<fieldset>
$ctrl.box1={{$ctrl.box1}}<br>
$ctrl.box2={{$ctrl.box2}}<br>
<h3>Player</h3>
</fieldset>
`,
controller: class player {
constructor() {
console.log("player",this);
}
$onInit() { …如何告诉PhpStorm/WebStorm $ctrl在模板中已知并且还帮助它决定它所属的控制器(可能使用jsdoc)？
我在Angular 1.5中以这种方式创建组件:
angular
.module('myModule')
.component('myComponent', {
templateUrl: "my.component.html",
controller : [
MyComponentController
]
});
ControllerAs 没有帮助......
出现问题的HTML片段($ctrl.*):
<div class="entity-summary clear" ng-click="$ctrl.toggleInfo()">
<div class="entity-col">
{{$ctrl.entity.id}}
</div>
<div class="entity-col">
{{$ctrl.entity.host}}
</div>
</div>
我想在AngularJS 1.5x中使用D3.js v4
在过去,我使用.directives作为图表,但现在我想知道是否可以使用.components而不是指令,如果这是一个很好的做法.
问题出现在d3.select(element[0]).append('svg')内部组件中.控制台抛出错误:未定义元素.
所以我试着用类似的东西d3.select('chart-container').append('svg')
然后d3在第一个拥有该类的元素中注入所有图表(在所有文档中查找类,而不仅仅是组件).
没有为每个添加不同的ID(工作量太大,维护太难)
我开始研究使用Angular2和我遇到的一个我无法找到解决方案的问题.我要求根据我从模型中收到的数据,我希望为给定的组件加载不同的模板.这主要与根据我收到的数据维护不同的布局有关.这可能吗？
谢谢
我从一个反应,和/ Redux的心态,其中的数据处理功能,以及数据从父母传给孩子孙子等组件本身不修改数据的到来,而他们通过自己的意图备份组件树.
我试图用Angular 1.5中的组件复制它.考虑以下:
app.js:
const appController = ($scope, data) => {
$scope.doSomething = () => console.log('Foooooo!');
};
app.html:
<div>
<node
do-something="doSomething()"
></node>
</div>
node.js:
app.component('node', {
// ...
bindings: {
doSomething: '&',
},
});
node.html:
<div>
<leaf
do-something="$ctrl.doSomething()"
></leaf>
</div>
leaf.js:
app.component('leaf', {
// ...
bindings: {
doSomething: '&',
},
});
leaf.html:
<div ng-click="$ctrl.doSomething()"></div>
这有效.当div在leaf点击'Foooooo!'登录到控制台.但是,如果我改变了ngClick回调的东西范围为通leaf(甚至只是一个文字等的'foo'),并改变doSomething在app.js采取一种说法,说法是undefined.我的猜测是我必须以某种方式传递数据 …
当我使用angular.component()来创建angular 1.5提供的全新组件时,没有链接函数,因此注入ngModelController或任何其他控制器的旧方法不起作用.
require: 'ngModel',
link: function(scope, element, attrs, ctrls)
上面的代码用于访问ngModelController的指令.我们现在如何在组件中访问它？
我正在尝试使用动态编译Angular组件$compile,但是范围不会传递给组件范围,而是传递给$ parent范围.
这是一个绑定到myTitle-attribute并呈现它的简单组件:
app.component('myComponent', {
bindings: {
myTitle: '<'
},
template: `
<div>
<div>Doesn't work: {{ $ctrl.myTitle}}</div>
<div>Works: {{ $parent.$ctrl.myTitle}}</div>
</div>`
});
然后在控制器(或指令等)中使用$ compile编译它:
app.controller('MainCtrl', function($scope, $element, $compile) {
var template = '<my-component></my-component>';
var bindings = {
myTitle: 'My Title'
}
var scope = angular.extend($scope.$new(true), {
$ctrl: bindings
});
var newElement = $compile(template)(scope);
$element.append(newElement);
});
运行时,它会产生结果:
不起作用:
作品:我的头衔
为动态创建的组件创建的范围如何作为组件的父范围传递？
关于角度为何如此行为以及可能如何避免它的任何指针都非常受欢迎.
除了在html中添加类.
我的意思是这样的:
在HTML中
<my-component></my-component>
在js
angular.module('app').component('myComponent', {
template: '<div class="inner-element">Inner element</div>',
className: 'outer-element' <--- wanted property
});
这就是我想要它渲染渲染的方式:
<my-component class="outer-element"> <--- that's what I want to get
<div class="inner-element">Inner element</div>
</my-component>