javascript - 如何在指令链接中获取我绑定(bind)到模板的范围

Question

在 html 中，我在指令中绑定(bind) 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？谢谢!

---

使用 scope.$watch 解决问题:

在 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
            });
        }
    };
});

Answer 1

您可以使用作用域传递您的 someValue。

在模板中:

parameter="someValueCanPassTo"

在指令中:

scope: {
    parameter: '='
},
link: function(scope, element, attrs) {
    $watch('parameter', function() {
        element.attr('my-attr', scope.parameter);
    });
}