Question

这是我使用JQuery创建的JSFIDDLE DEMO。

$(function(){
    $("#describe-block-toggle-btn").click(function(){
        $("#ptor-it-block").toggle();
        $(this).text(function(i, text){
          return text === "Start" ? "Stop" : "Start";
      })
    });
    $("#it-block-toggle-btn").click(function(){
        $(this).text(function(i, text){
          return text === "Start" ? "Stop" : "Start";
      })
    });
});

我需要将我的代码从JQuery转换为Angular。

到目前为止，我能够进行很多转换，但仍然无法实现切换效果，正如您在上面提到的JSFIDDLE DEMO中所看到的那样。

以下是使用plunker ANGULARJS DEMO 的链接。

任何帮助都会受到赞赏，如果有人能指出好的 angularjs教程，除了official angularjs site之外，它会很棒。未来深入学习angularjs。

更新

幸运的是，我在一个地方找到了许多用于学习AngularJS的博客文章，文章，视频等链接。访问 here 链接，然后探索无限。

Answer 1

http://plnkr.co/edit/VMfKJ2IKJ9WNRPlwE8Su

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="ptorJasmineAddon">
    <div id="ptor-nav-addon">
      <span>
        {{describeButtonData.block}}
        <button ng-click="changeStatus(describeButtonData)">{{describeButtonData.status}}</button>
      </span>
      <span ng-show="describeButtonData.status == 'Stop'">
        {{itButtonData.block}}
        <button ng-click="changeStatus(itButtonData)">{{itButtonData.status}}</button>
      </span>
    </div>
  </div>
</body>

</html>

JS

// Code goes here

var app = angular.module('myApp', []);
app.controller('ptorJasmineAddon', function($scope) {
  $scope.describeButtonData = {
    'block': 'Describe Block',
    'status': 'Start',
    'btnId': 'describe-block-toggle-btn',
    'id': 'ptor-describe-block'
  }
  $scope.itButtonData = {
    'block': 'It Block',
    'status': 'Start',
    'btnId': 'ptor-it-block',
    'id': 'ptor-it-block'
  };
  $scope.shown=true;
  $scope.changeStatus = function(btn) {
    btn.status = btn.status === "Start" ? "Stop" : "Start";
    console.log(btn);
  };
});

既然你提到了你的初学者，我也推荐这些vid资源，如果你喜欢这样学习东西：

https://www.youtube.com/watch?v=ZhfUv0spHCY

许多关于http://egghead.io

角度部分的小教程

freenode.net上还有#angularjs IRC，人们可以非常乐于助人并且知识渊博。

如果你需要做一些DOM操作，你会想要使用一个指令。当你编写一个指令时，你基本上给它一个名字然后告诉它你应该在哪里找到它（元素/标签E，类C，注释M或属性A）。这是来自SublimeText中AngularJS插件的指令定义提示：

directive('directiveName', [ function(){ //would reference in html like <directive-name> note camel case to snake case conversion
  // Runs during compile
  return {
    // name: '',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    // controller: function($scope, $element, $attrs, $transclude) {},
    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
    // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    // template: '',
    // templateUrl: '',
    // replace: true,
    // transclude: true,
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {

    }
  };
}]);

在angularjs中切换内容onclick按钮

1 个答案: