在html中,我在指令中绑定id:
<my-customer data="id"></my-customer>
在js:
angular.module('Main', [])
.controller('Controller', ['$scope', function($scope) {
$scope.id= 'divId';
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<div id="{{data}}"></div>',
link: function(scope,element,attrs){
console.log(document.getElementById('divId'));
}
};
});
它可以在模板中显示数据,但控制台显示未定义,因为模板尚未加载数据,如何在加载数据后得到dom? 谢谢!
使用范围。$ watch解决问题:
in html:
<my-customer param="id"></my-customer>
在js:
angular.module('Main', [])
.controller('Controller', ['$scope', function($scope) {
$scope.id= 'divId';
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
param: '='
},
template: '<div id="{{param}}"></div>',
link: function(scope,element,attrs){
scope.$watch('param',function(){
console.log(document.getElementById(param)); //get the dom
});
}
};
});
答案 0 :(得分:3)
您可以使用范围传递someValue。
在模板中:
parameter="someValueCanPassTo"
指令:
scope: {
parameter: '='
},
link: function(scope, element, attrs) {
$watch('parameter', function() {
element.attr('my-attr', scope.parameter);
});
}
答案 1 :(得分:2)
尽量不要使用data=""
,因为这是一个保留属性
有关详情,请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes。
编辑: data-将从属性中删除。所以你可以使用数据 - 但你必须为你的代码添加一个标识符。
因此,如果您将html更改为data-identifier="id"
并且在你的指令中声明范围如scope: { identifier: '=' }
你应该没问题