Angularjs 绑定到内部内容的指令无效

Question

我正在创建一个简单的功能切换指令，它需要进行检查并在检查成功时呈现内容。我不想要一个新的子范围（所以我尽量不嵌入）并且我希望指令被它的内容替换。当我在指令内的 html 中有模型绑定时，它就会失去它的绑定。

下面的第一个复选框就是示例 (plunker)。 normalChecked 保持绑定状态，而 toggleChecked 则不会。谁能告诉我应该如何使用 angularjs 指令执行此操作？

<!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>

编辑实际的指令代码调用一个 http 服务来查看用户是否有权访问某个功能，并执行上述代码以删除切换元素并在他们有权访问时将其替换为它的内容。如果他们没有访问权限，它会从 dom.

中删除该元素

Answer 1

我不明白你为什么不想嵌入，你的例子没有向我们展示你不想做的那种 "check"。

下面是如何使用 transclude 和 replace 实现它，这会给你留下额外的包装 div，你可以添加一个 ng-show根据您的检查，在其上显示或不显示内容：

http://plnkr.co/edit/DaThyPHqtWlKrdKDf7ei?p=preview

var app = angular.module('playground',[]);
var ToggleDirective = ['$timeout', function($timeout) {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div ng-transclude ng-show="showContent"></div>',
        link: function($scope, $element, $attr){
          $scope.showContent = true; // do your check here
        }
    };
}];
app.directive('toggle', ToggleDirective);

希望对您有所帮助

Answer 2

只需注释下面的代码即可。

//$element.replaceWith($element.children());

因为这个声明元素失去了作用域。

希望对您有所帮助。

Angularjs 绑定到内部内容的指令无效

Angularjs Directive binding to inner content not working

javascript

angularjs

angularjs-directive