Question

我的问题减少了snippet。实际上我正在使用离子做一个应用程序，但没关系，问题也出现在plunker中。

我还阅读了这个answer并更新了我的一些代码，但问题仍然存在。

我的控制器带有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那样更新，而且我给的是相同的值。

我几个小时都在努力解决这个问题，任何帮助都会非常有用，谢谢你的时间。

Answer 1

你应该通知角度有什么变化：

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

请参阅plunker

P.S。使用ng-click代替jQuery click事件。

Angular boolean属性不更新外部指令

1 个答案: