Javascript Angular JS:ng中的绑定显示不工作

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

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

以及控制器：

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组在打开的变量为true时显示。当我点击responseBox时，我可以看到变量切换，但btn组不显示/隐藏。我遗漏了什么？

重复Josh和我在上面的评论中所说的，点击处理程序在Angular的“外部”运行，因此您需要调用

作用域。$apply（）

使Angular运行摘要循环，以注意对

作用域所做的更改（然后它将更新您的视图）：

使用模板中的ng click可消除链接功能：

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

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



当我一开始认为我有一个范围问题时，我的绑定工作正常

因此，在angular 1.2和1.3 ng中，单击不是angular的“外部”，至少使用了我用于
切换功能的签名，如下所述：

我发现了我最初认为是范围问题的双括号ng show问题，原因如下：
您是否有css属性，如
display:none？在调用
scope.toggle（）
后，将
scope.$apply（）
添加到您的单击回调中。单击处理程序在Angular的“外部”运行，因此您需要使Angular运行摘要循环。这很有效，谢谢！顺便说一句，可能有一个更“角度”的方法来设置这个？例如，使用hg-click？是的，在模板的根元素上使用
ng-click=“toggle（）”
可以完全消除
链接。它是规范的，而且更简单。此外，您似乎缺少一个关闭
。也许我应该为此打开一个新线程，但使用此代码，如果我在html中定义多个响应框，切换函数将影响所有btn组的打开和关闭。我认为这与范围有关，但我似乎没有掌握范围的概念。当我为每个responseBox指令定义一个隔离作用域{}时，我得到了一个错误：多个指令[responseBox，ngController]要求在@JoostVanDoremalen上隔离作用域，为了支持多个响应框，我建议您让指令作用域管理
打开的
属性。您可以让指令创建子作用域（
scope:true
），或隔离作用域（
scope:{…}
）。切换功能可以在指令内的
范围上定义。这里有一个例子，我使用了
scope:true
，并将切换代码内联到click回调函数中（而不是定义一个方法）。如果有什么不清楚的地方，请告诉我。上面的小错误：我相信方法是$.scope.$.apply（）而不是$.scope.apply（）