0

现在已经使用 angular 几个月了，距离我投入到指令中只有一周左右的时间。今天我在尝试构建一个复选框字段依赖于另一个复选框字段的设置页面时遇到了这个小怪癖（如 - 仅在选中另一个复选框字段时显示）。

我发现有 ng-disabled 可以工作，但我想如果另一个没有被检查，我宁愿隐藏整个字段，+我想我可以在原始 html 上使用 ng-show 来做到这一点，但我我对指令非常着迷，我想了解它是如何从内部完成的。

所以，这里是 HTML：

<form>
  <input type="checkbox" data-ng-model="mdl.show" />
  <span>Switches 'mdl.show' on and off, now it's {{mdl.show}}</span>
  <div spg dependent="mdl.show"></div>
</form>

和控制器：

app.controller('appCtrl',['$scope',
  function($scope){
    $scope.mdl = {show: true};
  }
])

和指令：

app.directive('spg',function(){
  return {
    restrict: 'A',
    compile: function (element,attrs){
        var html = '<div data-ng-show="' + attrs.dependent + '">';
        html += '<p data-ng-show="' + attrs.dependent + '">This text doesn\'t show if dependent resolves to false</p>';
        html += '<p>For some reason, even though div wrapper has the same configuration as the previous \'p\' - this one will show either way</p>'
        html += '</div>';
        angular.element(element).replaceWith(html);
    }
  }
})

这就是那个笨拙的东西。除了获得解决此问题的方法外，我更愿意了解它发生的原因。虽然两者都很受欢迎。谢谢。

编辑：1.0.7 和 1.2.0rc1 的行为相同。

4

1 回答 1

0

我不知道为什么您的代码不起作用，但我知道您不需要使用该compile函数，除非您的指令进行模板转换，而自定义指令很少需要模板转换。大多数指令只需要实现link函数和/或controller函数。

在您的情况下，该指令不需要任何内容​​。以下代码可以正常工作：

app.directive('spg',function(){
  return {
    restrict: 'A',
    scope: { visible: '=' },
    template: '<div ng-show="visible">' +
              '<p>This text doesn\'t show if dependent resolves to false</p>' +
              '<p>For some reason, even though div wrapper has the same configuration as the previous \'p\' - this one will show either way</p>' +
              '</div>',
  };
});

Plunker在这里。

也许这个答案不是你所期望的，但我认为这个问题特别值得担心。如果您想了解有关该compile功能的更多信息，这篇文章应该可以帮助您入门。开发指南也有一些有价值的信息。

于 2013-08-23T00:16:01.360 回答