Javascript Angularjs指令绑定到内部内容无效
我正在创建一个简单的功能切换指令，如果检查成功，它需要执行检查并呈现内容。我不想要一个新的子范围（所以我尽量不排除），我希望指令被它的内容替换。当我在指令内的html中有模型绑定时，它就失去了绑定 下面的第一个复选框是示例（）。normalChecked保持绑定，而toggleChecked不保持绑定。有谁能告诉我如何使用angularjs指令执行此操作Javascript Angularjs指令绑定到内部内容无效,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我正在创建一个简单的功能切换指令，如果检查成功，它需要执行检查并呈现内容。我不想要一个新的子范围（所以我尽量不排除），我希望指令被它的内容替换。当我在指令内的html中有模型绑定时，它就失去了绑定 下面的第一个复选框是示例（）。normalChecked保持绑定，而toggleChecked不保持绑定。有谁能告诉我如何使用angularjs指令执行此操作 <!DOCTYPE html> <html> <head> <script src="https:/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script>
var app = angular.module('playground',[]);
var ToggleDirective = ['$timeout', function($timeout) {
return {
restrict: 'E',
link: function($scope, $element, $attr){
// timeout replicates http request
$timeout(function() {
console.log("here");
$element.replaceWith($element.children());
}, 100);
}
};
}];
app.directive('toggle', ToggleDirective);
</script>
</head>
<body ng-app="playground" ng-init="vm={toggleChecked:true, normalChecked:true};">
<toggle>
<input type="checkbox" ng-model="vm.toggleChecked">
</toggle><br/>
toggleChecked value = {{vm.toggleChecked}}<br><br><br><br><br><br><br><br>
<input type="checkbox" ng-model="vm.normalChecked"><br>
normalChecked value = {{vm.normalChecked}}
</body>
</html>
var app=angular.module（'操场'，[]）；
var-ToggleDirective=['$timeout'，函数（$timeout）{
返回{
限制：'E'，
链接：函数（$scope、$element、$attr）{
//超时复制http请求
$timeout（函数（）{
console.log（“此处”）；
$element.replaceWith（$element.children（））；
}, 100);
}
};
}];
应用指令（“切换”，切换指令）；
toggleChecked值={vm.toggleChecked}
normalChecked值={vm.normalChecked}
实际的指令代码调用http服务，查看用户是否有权访问某个功能，并执行上述代码以删除toggle元素，如果用户有权访问，则将其替换为toggle元素的内容。如果他们没有访问权限，它将从dom中删除元素。我不明白您为什么不想转包，您的示例没有向我们显示您也不想做的那种“检查” 下面是使用
transcludereplacedivng showvar-app=angular.module（'操场'，[]）；
var-ToggleDirective=['$timeout'，函数（$timeout）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“”，
链接：函数（$scope、$element、$attr）{
$scope.showContent=true；//在此处进行检查
}
};
}];
应用指令（“切换”，切换指令）；
希望这会有所帮助，只需对下面的代码进行注释即可
//$element.replaceWith($element.children());
我希望这将对您有所帮助。谢谢您的回复。关于检查，你是对的，但我认为除了超时模拟之外，这对问题并不重要。在ul（我的第一个使用案例）中的li周围使用这个额外的元素可能会导致问题。此外，transclude还增加了一个额外的子范围，这可能会破坏正在使用该指令的应用程序。。。lolWe将其用于功能切换。我省略了到web服务器查看当前用户是否有权访问某些内容的部分，然后用内部内容替换该指令，或者如果他们没有访问权限，则删除该元素。我们的菜单上有李的，所以我不能用div来包装。您认为有更好的方法在屏幕上显示和隐藏内容而不添加新元素和作用域吗？在这种情况下，您可以使用属性指令，该指令可以接收一个参数，指示需要检查的权限，然后您的指令应该使用服务来验证服务器上的权限，收到响应时，显示或隐藏元素。请记住，为了使其真正安全，您的服务器应该只返回用户有权访问的html（模板），因此您可以将安全检查完全保留在服务器上。这并不是我想要的，但它已经足够好了。我将指令限制为仅属性，如果web服务返回false，则执行$element.remove（）。谢谢为什么要在
$timeout//$element.replaceWith($element.children());