gpt4 book ai didi

javascript - AngularJS自定义指令在继承父范围的同时访问模板中的属性

转载 作者:行者123 更新时间:2023-12-02 12:38:19 27 4
gpt4 key购买 nike

我有一个自定义指令,我想继承父范围。我还想通过属性传递一个值。它看起来像这样:

Controller

app.controller('Main', ['$scope', function($scope){
$scope.cols = { 'col1': true, 'col2':false, 'col3': true};

$scope.toggleCol = function(colName){
$scope.cols[colName] = !$scope.cols[colName];
};
}]);

指令

wrApp.directive("custTh", function(){
return {
restrict: "EA",
scope: false,
replace: true,
template: '<th ng-show="cols[{{ colname }}]" ng-click="toggleCol({{ colname }})">{{ colname }}</th>',

};
});

HTML

<th cust-th colname="col2"></th>

我似乎无法访问属性值,因为我正在继承父范围。是否可以直接从模板访问指令属性?

最佳答案

您可以继承作用域,也可以使用以下方法创建子作用域:

scope: true

然后为了传递值:

link: function(scope, element, attrs) {
scope.$watch(attrs.valueFromOutside, function(newValue) {
scope.valueFromOutside = newValue;
});
}

这样,在指令的内部作用域中,您可以拥有不同的值,同时仍然可以访问父作用域。

您可以在这里看到这一切的实际情况: http://jsfiddle.net/HB7LU/15120/

关于javascript - AngularJS自定义指令在继承父范围的同时访问模板中的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28375047/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com