Question

我一直在重写我之前编写的一些Jquery任务，并希望它们现在可以在我的AngularJs App中使用。

我可以切换字形，但如何更改文字和滚动功能呢？

这是我的代码：

HTML

<body ng-app="toggleApp" ng-controller="toggleCtrl as tc">
  <a ng-click="tc.toggle('glyph'); tc.toggle('text')" class="lead p-color learn-button togglebtn shake shake-rotate">
     <small>
         <span id="toggleGlyph" ng-class="tc.iconGlyph ? 'glyphicon glyphicon-minus' : 'glyphicon glyphicon-plus'">
         </span>&nbsp;<span ng-class="tc.textDesc ? 'Hide' : 'Learn More'">Learn More</span>
     </small>
  </a>
</body>

主要Javascript

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/', {
      templateUrl : 'pages/LandingPage.html',
      controller : 'LandingCtrl'
  })

控制器Javascript

app.controller('toggleCtrl', function () {
  this.toggle = function (property) {
    this.iconGlyph = (property === 'glyph') ? !this.iconGlyph : this.iconGlyph;
    this.textDesc = (property === 'text') ? !this.textDesc : this.textDesc;
   }
});

以前的Jquery

$(function () {
  $('a.togglebtn').click(function () {
    $("#toggleGlyph").toggleClass("glyphicon-minus glyphicon-plus");
    $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More");
    $('#myContent').stop().slideToggle(500);
    $('html,body').animate({ scrollTop: $('#myContent').offset().top - 200 }, 800);
    return false;
  });
});

http://jsfiddle.net/amptwig91/7jf5sdnv/

Answer 1

检查此代码段

var app = angular.module("app", []);

app.controller('toggleCtrl', function() {

  var _parent = this;
  this.toggle = function() {
    _parent.isToggled = !_parent.isToggled;
    setText();
  }

  function setText() {
    if (_parent.isToggled) {
      _parent.text = 'Hide';
    } else {
      _parent.text = 'Learn More';
    }
  }
  this.isToggled = false;
  this.text = 'Learn More';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<body ng-app="app" ng-controller="toggleCtrl as _">
  <a href="#" ng-click="_.toggle()"> <i class="fa" ng-class="{'fa-plus' : !_.isToggled , 'fa-minus' : _.isToggled }"></i> {{_.text}}</a>

  <body>

Answer 2

因为我正在使用UI-Bootstrap。这就是我最终解决它的方法！

<a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-init="isCollapsed1 = true" data-ng-click="isCollapsed1 = !isCollapsed1"> 
                    <small>
                        <div ng-show="isCollapsed1">
                            <span class="glyphicon glyphicon-plus" ></span> Learn More
                        </div>
                        <div ng-hide="isCollapsed1">
                            <span class="glyphicon glyphicon-minus"></span> Hide
                        </div>
                    </small>
                </a>

Angular - 使用ngclick在控制器中切换类，文本和滚动

2 个答案: