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 already in progress error

我发现了我的双括号ng-show问题，我最初认为这是一个范围问题归功于这个SO： why doesn't ng-show remove class ng-hide

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

2 个答案: