我正在AngularJS项目中的指令。在此指令中,我必须在运行时以编程方式设置HTML元素的宽度。但是,我这样做没有任何成功。目前,我的指令如下所示:
My Plunkr Is Here
myApp.directive('myDirective', function () {
return {
restrict:'E',
transclude: true,
templateUrl: 'my-directive.html',
link: function(scope, element, attrs) {
var inputField = element.find('input');
scope.width = inputField[0].offsetWidth;
scope.err1 = 'none';
try {
var testDiv = element.find('#test-name');
element(testDiv).css('width', (scope.width + 'px'));
} catch (e1) {
scope.err1 = e1.message;
}
scope.err2 = 'none';
try {
var testDiv = element.find('.test-class');
element(testDiv).css('width', '500px');
} catch (e2) {
scope.err2 = e2.message;
}
},
controller: function ($scope) {
}
};
});
作为the plunkr shows,尝试以编程方式设置div的宽度时会遇到运行时错误。我不明白我在做什么错。有人可以告诉我我在做什么错吗?我需要弄清楚如何在运行时在链接或控制器功能中设置宽度。再次,我必须以编程方式执行此操作。我无法为合并范围添加宽度并将UI绑定到该范围。
最佳答案
干得好。
Your new plunkr
你有几个问题。首先,没有id
test-name
元素-您设置了name
,而不是ID
。
另外,find()
不起作用,请改用children()
-您的示例实际上并未找到该元素,因此得到了您遇到的错误。
新指令(为清楚起见,删除了错误内容)-您可以更改/删除第二个scope.width只是为了查看它是否有效
var myApp = angular.module("myApp", []);
myApp.directive('myDirective', function () {
return {
restrict:'E',
transclude: true,
templateUrl: 'my-directive.html',
link: function(scope, element, attrs) {
var inputField = element.find('input');
var name = element.children('#test-name');
scope.width = inputField[0].offsetWidth;
scope.width = inputField[0].offsetWidth /3; // To test
angular.element(name).css('background-color', 'orange');
angular.element(name).css('width', (scope.width + 'px'));
}
};
});
您的新模板,其中删除了一些CSS,并设置了测试名称的ID-代替了name属性
<script type="text/ng-template" id="my-directive.html">
<div style="width:100%">
<div id="test-name">Hello</div>
<input type="text" style="width:100%;" />
<br /><br />
<div>Width: {{width}}</div>
<div>Error #1: {{err1}}</div>
<div>Error #2: {{err2}}</div>
</div>
</script>