如何在指令链接函数中获取绑定到模板的作用域

24 浏览
0 Comments

如何在指令链接函数中获取绑定到模板的作用域

在HTML中，我将id绑定在指令内部：

在JS中：

angular.module('Main', [])
.controller('Controller', ['$scope', function($scope) {
    $scope.id= 'divId';
}])
.directive('myCustomer', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        template: '',
        link: function(scope,element,attrs){
            console.log(document.getElementById('divId'));
        }
    };
});

它可以在模板中显示数据，但控制台显示undefined，因为模板还没有加载数据，我如何在数据加载后获取dom元素呢？

谢谢！

使用scope.$watch解决了这个问题：

在HTML中：

在JS中：

angular.module('Main', [])
.controller('Controller', ['$scope', function($scope) {
    $scope.id= 'divId';
}])
.directive('myCustomer', function() {
    return {
        restrict: 'E',
        scope: {
            param: '='
        },
        template: '',
        link: function(scope,element,attrs){
            scope.$watch('param',function(){
                console.log(document.getElementById(param)); //获取dom元素
            });
        }
    };
});

0

2 答案

0 Comments

问题的原因是在指令中绑定模板作用域时，想要获取模板作用域的范围，但尝试使用了保留属性"data"，导致出现问题。根据Mozilla开发者网络中的文档，"data"是一个保留属性，不推荐在HTML中使用。解决方法是在HTML中使用"data-"前缀，并添加一个标识符来代表代码。例如，将HTML中的属性改为"data-identifier"，在指令中声明作用域时使用"scope: { identifier: '=' }"。这样就可以成功地绑定模板作用域。

另外，还提到了使用"scope.$watch()"在链接函数中解决问题的方法。代码如下：

scope.$watch('identifier', function(newValue, oldValue) {
  // 处理模板作用域的变化
});

通过使用"scope.$watch()"来监控模板作用域的变化，可以在变化发生时执行相应的操作，从而解决问题。

，要解决在指令中获取绑定的模板作用域范围的问题，可以避免使用保留属性"data"，使用"data-"前缀并添加一个标识符来代表代码。另外，还可以使用"scope.$watch()"来监控模板作用域的变化。

0
0 Comments

如何在指令的link函数中获取绑定到模板的作用域？

在这个问题中，我们需要在指令的link函数中获取绑定到模板的作用域。通过传递作用域的方式，我们可以将某个数据（someValue）传递给指令，并在指令中进行处理。

解决方法如下所示：

在模板中，我们可以通过以下方式将数据传递给指令：

在指令中，我们需要使用scope属性来定义作用域，并使用$watch来监听作用域中的变化。通过element.attr方法，我们可以将作用域中的数据赋值给指令元素的属性。

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

通过以上方法，我们可以在指令的link函数中获取绑定到模板的作用域，并对其进行相应的操作。

0