ng-click无法替换元素

这里我试图用一个占位符div替换一个按钮，按钮将会转到上面板。当按钮返回到下面板时，ng-click不再起作用。我需要按钮像之前那样工作。我不能使用$编译，因为它将子添加到下面板，但我只需要替换。这里是我的plunker ng-click无法替换元素

// 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); 
     }; 
    } 
})();

来源

2016-01-29 Sharif Rifat

您需要编译控制器作用域的元素 – ngLover

plunker链接不工作 – vpsingh016

$ compile（parentNode.contents（））（$ scope）;在最后的删除方法中试试这个 – ngLover

千万不要试图从你的角度控制器操纵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="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]" 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>

来源

2016-01-29 13:25:31 Duncan

而不是做所有的占位符的东西，用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。

来源

2016-01-29 13:55:30 georgeawg

谢谢，这可以帮助我很多@georgeawg –

ng-click无法替换元素

回答

相关问题