angularjs作用域变量onclick更改条件div

Question

我有两个div，我想用onclick事件有条件地显示它们。

my-angular app.js

$(document).on('click', '#showless', function(el) {
 var appElement = document.querySelector('[ng-app=myapp]');
 var $scope = angular.element(appElement).scope();
  $scope.$apply(function() {
      $scope.value = false;
    });
});
$(document).on('click', '#showmore', function(el) {
  var appElement = document.querySelector('[ng-app=myapp]');
  var $scope = angular.element(appElement).scope();
  $scope.$apply(function() {
       $scope.value = true;
 });
});

和我的myapp分区（myapp.html）

    <div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" href="">more</a></span>
    </div>
    <div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" href="">less</a></span>
    </div>

（truncate是我写的一个过滤器，它运行良好。）

Answer 1

我不太确定你想做什么，但Angular提供了ng-click，所以你不应该绑定到$(document).on('click')。

我建议一种更简单的条件显示方法：

<div ng-show="desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value|truncate}}<span><a id="showmore" ng-click="desc = true" href="#">more</a></span>
    </div>
    <div ng-show="!desc" id="description" class="text-muted" style="padding-top:5px;padding-left:10px;padding-right:10px;color:#2E2E2E;font-size:11px;">{{myapp.value}}<span><a id="showless" ng-click="desc = false" href="#">less</a></span>
    </div>

以上使用ng-click来设置desc的值。因此，控制器中不需要任何其他逻辑来切换divs。