与嵌入元素共享指令范围

Question

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

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

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

.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 中那样使用 transclude

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