Question

我有一个button，它在我的Angular应用程序之外运行得非常好。当我尝试将其添加到我的应用程序时，其功能会中断。

HTML

<body ng-app="app">
    <div ng-controller="JsonController as jsonCtrl">
        <div class="cluster" ng-repeat="cluster in flats.blah.CLUSTERS">
            <h4 class="cluster-title row">{{cluster.name}}</h4>
            <div class="center">
              <div class="container wrap">
                  <div class="btn-group btn-toggle">
                    <button class="btn btn-lg btn-green">ON</button>
                    <button class="btn btn-lg btn-default active">OFF</button>
                  </div>
              </div>
           </div>
       </div>
    </div>
</body>

JSON-controller.js

(function() {   

    angular
        .module('app')
        .controller('JsonController', function($scope, $http) {
            $http.get('flat.json')
                .then(function(res) {
                    $scope.flats = res.data;
                });
        });
})();

json-controller.js从我的工作区读入（？）一个JSON文件，以便我可以通过AngularJS访问它。奇怪的是，当我在控制器内部使用带有硬编码数据模型的不同控制器时，按钮可以工作。所以当我将它包含在Angular应用程序中时，我知道问题正在发生，但我不知道为什么。任何见解都会很棒。我会在尝试解决此问题时提供更新。

这是一个与之配合使用的控制器：

工薪controller.js

(function() {

    angular
        .module('app')
        .controller('WorkingController', WorkingController);

    function WorkingController() {

        this.item = data;
    }

    var data == // ... hard-code data model
})();

我知道控制器的语法不同，但即使它们具有相同的语法，问题仍然存在。无论如何，我应该让我的控制器语法保持一致。

编辑：

我还应该注意其他功能也会破坏，例如弹出窗口。我在一个单独的jQuery文件中实现了按钮和弹出功能。也许JSON和jQuery之间存在差异？我错过了库依赖吗？

Answer 1

您应该将按钮操作包装到指令中。您可以在不使用Jquery的情况下执行它，只需使用import java.util.ArrayList; import java.util.LinkedList; import java.util.Stack; public class ZigZagTraversal { public static void main(String[] args) { // TODO Auto-generated method stub BinaryTree bt = new BinaryTree(); int[] array = {2,5,1,3,11,7,8,9,4,10,6}; /* * 2 * / \ * / \ * / \ * 5 1 * / \ / \ * / \ / \ * 3 11 7 8 * / \ / \ * 9 4 10 6 * * */ bt=BinaryTree.buildATree(bt, array); //BinaryTree.inOrderTraversal(bt); zigZagTraversal(llForAllNodesAtEachDepth(bt)); zigZagDisplay(bt); } public static void zigZagDisplay(BinaryTree bt){ Stack<BinaryTree> s = new Stack<>(); if(s.isEmpty()) s.push(bt); boolean flag = true; while(!s.isEmpty()){ Stack<BinaryTree> temp = new Stack<>(); while(!s.isEmpty()){ BinaryTree b = s.pop(); System.out.print(b.data+" "); if(flag){ if(b.left!=null) temp.push(b.left); if(b.right!=null) temp.push(b.right); } else{ if(b.right!=null) temp.push(b.right); if(b.left!=null) temp.push(b.left); } } s=temp; flag=!flag; } } public static ArrayList<LinkedList<BinaryTree>> llForAllNodesAtEachDepth(BinaryTree bt){ ArrayList<LinkedList<BinaryTree>> res = new ArrayList<LinkedList<BinaryTree>>(); return createLlForAllNodesAtEachDepth(res,bt, 0); } public static ArrayList<LinkedList<BinaryTree>> createLlForAllNodesAtEachDepth(ArrayList<LinkedList<BinaryTree>> res, BinaryTree bt, int level){ if(bt==null) return null; if(level==res.size()){ LinkedList<BinaryTree> list = new LinkedList<BinaryTree>(); list.add(bt); res.add(list); createLlForAllNodesAtEachDepth(res,bt.left,level+1); createLlForAllNodesAtEachDepth(res,bt.right,level+1); } else{ res.get(level).add(bt); createLlForAllNodesAtEachDepth(res,bt.left,level+1); createLlForAllNodesAtEachDepth(res,bt.right,level+1); } return res; } public static void zigZagTraversal(ArrayList<LinkedList<BinaryTree>> res){ boolean flag=true; for(int i=0;i<res.size();i++){ LinkedList<BinaryTree> temp = res.get(i); if(flag){ for(int j=0;j<temp.size();j++){ System.out.print(temp.get(j).data+" -> "); } flag=false; } else{ for(int j=temp.size()-1;j>=0;j--){ System.out.print(temp.get(j).data+" -> "); } flag=true; } System.out.println(); } } }指令和数据绑定。

指令：

ngClass

使用模板：

模板：

(function(){



'use strict';

function toggle() {

    function link(scope, elm, attr, ctrl){

        angular.element(elm).on('click', function(){
            scope.on = !scope.on;
            scope.off = !scope.off;
            scope.$digest();
        });

    }


    var directive = {
        restrict: 'AE',
        link: link,
        templateUrl: 'template.html',
        scope: {
            on: "=",
            off: "="
        }
    };

    return directive;

}

angular
    .module('app')
    .directive('toggle', toggle);

})();

控制器：

<div class="btn-group btn-toggle">
    <button class="btn btn-lg" ng-class="{'btn-success':on, 'btn-default':!on}">ON</button>
    <button class="btn btn-lg" ng-class="{'btn-danger':off, 'btn-default':!off}">OFF</button>
  </div>

HTML：

(function() {   

    angular
        .module('app')
        .controller('JsonController', function($scope, $http) {

            $scope.activeOn = true;
            $scope.activeOff = false;

            $http.get('flat.json')
                .then(function(res) {
                    $scope.flats = res.data;
                });
        });
})();

这是我的flat.json示例：

<body ng-app="app">
    <div ng-controller="JsonController as jsonCtrl">
        <div class="cluster" ng-repeat="cluster in flats.blah.CLUSTERS">
            <h4>Name : {{cluster.name}}</h4>
            <div class="center">
              <div class="container wrap">
                <toggle on="activeOn" off="activeOff"></toggle>
              </div>
           </div>
       </div>
    </div> 
</body>

添加到AngularJS应用程序时，按钮功能会出现故障

1 个答案: