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