Question

问题在于，当您将包含表达式的内容转换为例如ng-click的属性时，更改不会出现在父控制器的范围内，如您在此小提琴中所见：

单击已转置内容中的隐藏框时，没有任何反应。

    <div ng-controller="myCtrl">
    <panel ng-show='showBox'>
        <div class='box'>
             {{name}}
            <br>
            <button ng-click='showBox = false'>hide box button inside of transcluded content</button>
        </div>
    </panel>
    <br>

这里，ng-click中的表达式对控制器中的$ scope.showBox没有影响，但你会认为这是因为被转换内容的范围应该与控制器范围相同，对吧？

BaseApp = angular.module('BaseApp', []);

BaseApp.controller('myCtrl', function($scope) {
    $scope.name = 'bill jones';

    $scope.showBox = true;
});

BaseApp.directive('panel', function() {
    return {
        restrict: 'E',
        template: '<div>header<br><div ng-transclude></div></div>',
        transclude: true,
    }
})

Answer 1

我意识到解决方案只是将ng-click属性设置为控制器中的函数而不是像这样的表达式：

BaseApp.controller('myCtrl', function($scope) {
    $scope.name = 'bill jones';

    $scope.showBox = true;

    $scope.hideBox = function() {
        $scope.showBox = false;
    }
});


<panel ng-show='showBox'>
   <div class='box'>
      {{name}}
      <br>
      <button ng-click='hideBox()'>hide box button inside of transcluded content</button>
    </div>
 </panel>

这是工作小提琴：

http://jsfiddle.net/75f2hgph/

Controller $ scope属性不会随着transcluded内容中的表达式而改变

1 个答案: