angularjs - Controller $scope property does not change with expression in transcluded content

Question

The problem is that when you have transcluded content which contains an expression as an attribute of ng-click for example, the change does not occur in the scope of the parent controller as you can see in this fiddle:

http://jsfiddle.net/vt7rmqya/

Nothing happens when you click hide box inside of transcluded content.

    <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>

Here, the expression in ng-click has no effect on the $scope.showBox in the controller but you would think that it would because the scope of the transcluded content should be the same as the controller scope, right?

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/