Question

我正在编写一个可重用的模态指令，但是被转换的元素创建了自己的范围。这是问题的JSFIDDLE。这是它的工作原理。

<button ng-click="show=!show">Show Modal</button>
<modal visible="show">
    <button ng-click="show=!show">X</button>
</modal>

请注意，显示它的按钮有效，但X不会关闭它，因为内部按钮被转换并创建自己的范围。有没有办法将transcluded范围链接到指令的当前范围？或者只是阻止它创建自己的范围？这是指令。

.directive('modal', function($compile) {
return {
  restrict: 'E',
  template: "<div ng-style='bgstyling()' ng-transclude></div>",
  transclude: true,
  link: function(scope, elem, attrs) {
    scope.$watch(attrs.visible, function(val) {
      elem[0].style.visibility = val ? 'visible' : 'hidden';   
    });
    scope.bgstyling = function() {
      return {
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'bottom': '0',
        'right': '0',
        'backgroundColor': attrs.bgColor || '#000',
        'opacity': attrs.opacity || '0.85'
      }
    }
  }
}

}）

*更新*

我认为答案可能与链接函数的transclude函数参数有关。这就是我刚刚尝试过的，但仍然不能正常工作。

link: function(scope, elem, attrs, nullC, transclude) {
    transclude(scope, function(clone) {
      elem.append($compile(clone)(scope));
    });
    ...

Answer 1

让控制器负责更新范围有帮助 - 毕竟共享范围，你可能想要在同一个地方更新它的逻辑。

.controller("testCtrl", function($scope) {
  $scope.show = false;
  $scope.toggle = function() {
    $scope.show = !$scope.show;
  };
})

模板：

<div ng-app="test" ng-controller="testCtrl">
  <button ng-click="toggle()">Show Modal</button>
  <modal visible="show">
    <button ng-click="toggle()">X</button>
  </modal>
</div>

查看此JSFiddle

Answer 2

关闭按钮特定于Modal指令，因此您可以将按钮放在指令html中，避免出现范围问题。

jsfiddle

...      
template: "<div ng-style='bgstyling()'><button ng-click=\"show=!show\">X</button></div>",
...

如有必要，您也可以访问父作用域，但我更愿意尝试尽可能简化作用域。

修改您仍然可以使用此jsfiddle

中的转码功能
... template: " <div ng-style='bgstyling()'> <button ng-click=\"show=!show\">X</button> <div ng-transclude></div> </div> ", transclude: true, ...

与躲避元素共享指令范围

2 个答案: