角度布尔属性未在指令外部更新

Angular boolean property is not updating outside directive

本文关键字：指令 外部 更新 布尔 属性      更新时间：2023-09-26

我做了一个简化的问题片段。实际上我正在使用ionic做一个应用程序，但没关系，问题也发生在plunker中。

我也阅读了这个答案并更新了一些代码，但问题仍然存在。

我有一个object的控制器：

app.controller('myCtrl', function($scope) {
  $scope.object = {
    boolean: true,
    btn1: 'Do it be TRUE',
    btn2: 'Do it be FALSE'
  }
})

我想在此指令中更改其boolean属性：

.directive('myDirective', function() {
  return {
    template: '<button class="btn btn-default">{{$obj.btn1}}</button>'
    + ' <button class="btn btn-default">{{$obj.btn2}}</button>',
    restrict: 'A',
    scope: { $obj: '=myDirective' },
    link: function(scope, element, attrs) {
      var listener = scope.$watch('$obj', function() {
        if (scope.$obj) listener();
        else return;
        var buttons = element.find('button'),
          btn1 = buttons.first(),
          btn2 = buttons.last();
        if(scope.$obj.boolean){
          btn1.addClass('selected');
          $('#Log').html('true');
        }else {
          btn2.addClass('selected');
          $('#Log').html('false');
        }
        buttons.on('click', function(){
          buttons.removeClass('selected');
          $(this).addClass('selected');
          var isTrue = this === btn1[0];
          $('#Log').html(String(isTrue)); // works
          scope.$obj.boolean = isTrue; // does not works
        });
      });
    }
  }
});

正如您在运行 plunker 时所看到的，角度日志不会像 jQuery 那样更新，我给出了两个相同的值。

我正在为此苦苦挣扎几个小时，任何帮助都会得到真正的赞赏，感谢您的时间。

您应该通知 angular 某些内容已更改：

scope.$apply(function () { ... });

见普伦克

P.S. 使用 ng-click 而不是 jQuery 点击事件。

相关文章：