我对 Angular 相当陌生,我想在 AngularJS 中创建一个如下所示的指令:
我的方法是制作一个类似以下内容的模板:
进度条.html
<div class="container">
<div class="progress-line"></div>
</div>
<div class="current"> 11min </div>
<div class="max"> 24min </div>
然后使用 css 制作图形,并在指令的链接/编译功能中使用一些 javascript 将标记(“11min”和“24min”)移动到正确的位置,因为我不知道标记的宽度预先进度条。
这是一个不好的方法吗?我还没有发现其他人在一个指令中处理多个 DOM。
为了测试,我尝试在单击时将容器设为红色:
app.directive('progressBar', function($timeout) {
var linkFn = function(scope, element, attrs) {
element.on("click", function () {
element.childNodes[0].css("background-color", "red");
});
};
return {
restrict: 'EA',
scope:{},
templateUrl: 'templates/directives/progress-bar.html',
link: linkFn
};
});
但这不起作用:
Uncaught TypeError: Cannot read property '0' of undefined
最佳答案
首先,不要这样编辑 dom
element.childNodes[0].css("背景颜色", "红色");
使用ngStyle
,这就是 Angular 方式
https://docs.angularjs.org/api/ng/directive/ngStyle
像这样:
<div class="container" ng-style="myStyle" ng-click="clickHandler()">
<div class="progress-line"></div>
</div>
<div class="current"> 11min </div>
<div class="max"> 24min </div>
app.directive('progressBar', function($timeout) {
var linkFn = function(scope, element, attrs) {
scope.myStyle = {};
scope.clickHandler = function() { scope.myStyle.background-color = 'red' }
};
return {
restrict: 'EA',
scope:{},
templateUrl: 'templates/directives/progress-bar.html',
link: linkFn
};
});
关于javascript - 使用 Angular Directive 控制多个 DOMS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39732500/