Question

这里我试图用一个占位符div替换一个按钮，按钮将转到上面板。当按钮返回到下面板时，ng-click不再工作。我需要按钮在它之前工作。我不能使用$ compile，因为它将child附加到下面板，但我只需要替换。这是我的plunker

    // Code goes here

(function () {
    'use strict';
    angular.module('demo', [
        // Angular modules
        //'dndLists'
    ]);
    angular
        .module('demo')
        .controller('buttonController', buttonController);

    buttonController.$inject = ['$scope','$compile','$document'];

    function buttonController($scope,$compile,$document) {
        /* jshint validthis:true */
        var vm = this;
        vm.title = 'buttonController';
        var btns=[
            {name:'btn-1',class:'active'},
            {name:'btn-2',class:'active'},
            {name:'btn-3',class:'active'},
            {name:'btn-4',class:'active'}
        ];
        $scope.answerButtons = [];
        $scope.buttons = btns;

        $scope.pushArray = function (item,$event) {
            //inset new element to upper panel
            $scope.answerButtons.push(item);
            //replace lower element with a laceholder
            var oldElem=angular.element($event.target);
            var parentNode=oldElem[0].parentNode;
            var newNode=document.createElement('div');
            newNode.className='placeholder';
            newNode.id=item.name;
            parentNode.replaceChild(newNode,oldElem[0]);
        };

        $scope.removeArray = function (item) {
            //remove element from upper panel
            var index = $scope.answerButtons.indexOf(item);
            $scope.answerButtons.splice(index, 1);
            //create new element for replacing into lower panel
            var newNode=document.createElement('div');
            newNode.appendChild(document.createTextNode(item.name));
            newNode.className='btn btn-primary active';
            var att=document.createAttribute("ng-repeat");
            att.value="item in buttons";
            newNode.setAttributeNode(att);
            att=document.createAttribute("ng-click");
            att.value="pushArray(item,$event)";
            newNode.setAttributeNode(att);

            //Replace previous elemnt in place of place holder
            var oldElem=document.getElementById(item.name);
            var parentNode=oldElem.parentNode;
            parentNode.replaceChild(newNode,oldElem);
        };
    }
})();

Answer 1

永远不要试图从角度控制器操纵DOM。操纵您的数据模型，只需确保模板生成正确的html。以下是我认为你要做的事情：

(function () {
    'use strict';
    angular.module('demo', [
        // Angular modules
        //'dndLists'
    ]);
    angular
        .module('demo')
        .controller('buttonController', buttonController);

    buttonController.$inject = ['$scope','$compile','$document'];

    function buttonController($scope,$compile,$document) {
        /* jshint validthis:true */
        var vm = this;
        vm.title = 'buttonController';
        var btns=[
            {name:'btn-1',class:'active'},
            {name:'btn-2',class:'active'},
            {name:'btn-3',class:'active'},
            {name:'btn-4',class:'active'}
        ];
        $scope.answerButtons = [];
        $scope.buttons = btns;

        $scope.pushArray = function (item) {
            //inset new element to upper panel
            $scope.answerButtons.push(item);
            item.placeholder = true;
        };

        $scope.removeArray = function (item, index) {
            //remove element from upper panel
            $scope.answerButtons.splice(index, 1);
            item.placeholder = false;
        };
    }
})();

和html：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="demo">
      <p>Use this area to provide additional information.</p>
      <div ng-controller="buttonController">
        <div class="panel panel-default fixed-sized">
          <div class="btn btn-primary {{item.class}}" ng-repeat="item in answerButtons" ng-click="removeArray(item,$index)">{{item.name}}</div>
        </div>
        <div class="panel panel-danger fixed-sized">
          <div class="btn btn-primary {{item.class}}"
            ng-repeat-start="item in buttons"
            ng-if="!item.placeholder"
             ng-click="pushArray(item,$index)">{{item.name}}</div>
          <div class="placeholder"
            ng-if="item.placeholder" ng-repeat-end></div>
        </div>
      </div>
    </div>
  </body>

</html>

Answer 2

使用ng-class禁用按钮，而不是使用所有占位符。

      <div class="btn btn-primary {{item.class}}"
                ng-repeat="item in buttons"
                ng-click="pushArray(item,$event)"
                ng-class="{disabled: item.srcDisable}">
        {{item.name}}
      </div>

用简单的代码替换所有DOM操作。

    $scope.pushArray = function (item,$event) {
        if (item.srcDisable) return;
        item.srcDisable = true; 
        //inset new element to upper panel
        $scope.answerButtons.push(item);
    };

    $scope.removeArray = function (item) {
        item.srcDisable = false;
        //remove element from upper panel
        var index = $scope.answerButtons.indexOf(item);
        $scope.answerButtons.splice(index, 1);
    };

CSS

    .active{
        background-color:blue !important;
        color:white;
    }
    .disabled {
        background-color:dimgrey !important;
        color:dimgrey;
    }

DEMO on PLNKR。

ng-click无法处理替换元素

2 个答案: