Angular JS：ng-show中的綁定不起作用

Question

我有一個指令和一個控制器：

app.directive('responseBox', function(){
return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'responseBox.html',
    link: function(scope, element, attrs) {
        element.bind("click", function () {
            scope.toggle();
        })
    }
}});

和一個控制器：

app.controller('responseBoxCtrl', function($scope) {
$scope.opened = false;
$scope.toggle = function() {
    $scope.opened = !$scope.opened;
    console.log($scope.opened);
}});

responseBox.html：

<div class="promptBlockResponse" ng-transclude>
<div class="btn-toolbar" style="text-align: right;">
    <div class="btn-group" ng-show="opened">
        <a class="btn btn-link" href="#"><i class="icon-pencil icon-white"></i></a>
        <a class="btn btn-link" href="#"><i class="icon-remove icon-white"></i></a>
    </div>
</div>          

並在主html文件中：

<response_box ng-controller="responseBoxCtrl"></response_box>

我希望btn-group顯示何時打開的變量為true。 當我單擊responseBox時，我可以看到變量切換，但是btn-group不顯示/隱藏。 我錯過了什么？

Answer 1

所以重復Josh和我在上面的評論中所說的，點擊處理程序在Angular的“外部”運行，所以你需要調用scope.$apply()使Angular運行一個摘要周期來注意對scope所做的更改（然后它會更新你的觀點）：

$scope.toggle = function() {
    $scope.opened = !$scope.opened;
    console.log($scope.opened);
    $scope.$apply();
}});

通過在模板中使用ng-click可以消除鏈接功能：

<div class="promptBlockResponse" ng-transclude ng-click="toggle()">

Answer 2

使用Angular 1.3和1.2，HTML模板中的以下片段用於自定義元素指令：

<div ng-click="toggle($event)"></div>
<div ng-show="data.isOpen"></div>

以及來自該自定義指令的控制器的片段：

$scope.toggle = function ($event, destinationState) {
....
data.isOpen = true; //this is in scope and a digest cycle is already running
//calling $scope.$apply will cause an error

演示了一個范圍內的場景，您需要使用$ apply。

我遇到了這個問題，因為我在我的問題中使用了雙括號

<div ng-show="{{data.isOpen}}">

改為

 <div ng-show="data.isOpen"></div>

當我一開始認為我有一個范圍問題時，讓我的約束工作。

所以在角度1.2和1.3 ng點擊不是Angular的“外部”，至少使用我用於toggle功能的簽名，這里解釋： $ apply已在進行中錯誤

我發現了我的雙支架ng-show問題，我最初認為這是一個范圍問題，這要歸功於SO： 為什么不用ng-show刪除類ng-hide