11

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

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);
}});

响应框.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 显示打开的变量何时为真。当我单击 responseBox 时，我可以看到变量切换，但 btn-group 不显示/隐藏。我错过了什么？

4

2 回答 2

30

因此，重复 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()">
于 2013-04-09T02:10:02.290 回答
8

在 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 的范围内场景。

我遇到了这个 SO 问题，因为我在我的

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

更改为

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

当我一开始以为我遇到了范围问题时，我的绑定工作了。

所以在 Angular 1.2 和 1.3 中，ng-click 不是 Angular 的“外部”，至少使用我用于我的toggle函数的签名并在此处解释： $apply already in progress error

我发现了我最初认为是范围问题的双括号 ng-show 问题，这要归功于这个 SO： 为什么 ng-show 不删除类 ng-hide

于 2015-04-01T03:17:06.650 回答