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

我不明白为什么你不想转发，你的例子没有向我们展示你想要做的“检查”。

以下是使用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指令绑定到内部内容不起作用

2 个答案: