刪除角

動態創建酥料餅我是新來的角，我已經能夠創建一個圍繞選定的文本具有以下功能刪除角

$scope.highlight = function() { 

     var a = document.createElement("a"); 
     a.setAttribute('tabindex', "0"); 
     a.setAttribute('data-toggle','popover'); 
     a.setAttribute("id","1"); 
     a.setAttribute('data-content',"<button type='button' class='btn btn-default' ng-click='deleteLabel()'><small><span class='glyphicon glyphicon-remove'></span></small></button>"); 
     a.setAttribute('data-html','True'); 

     if (window.getSelection) { 
       var sel = window.getSelection() 
       var range = sel.getRangeAt(0).cloneRange(); 
       range.surroundContents(a); 
       sel.removeAllRanges(); 
       sel.addRange(range); 
     } 

     $timeout(function(){ 
      $('[data-toggle="popover"]').popover(); 
     }, 50); 
    };

而且，在上面的代碼中，我創建了酥料餅的引導酥料餅裏面坐了一個按鈕，點擊它時（ng-click='deleteLabel()'）應該調用下面的函數應該刪除的元素

$scope.deleteLabel= function(){ 
      alert("removing label"); 
      var labelEl=document.getElementById("1"); 
      labelEl.remove(); 
     };

但是，它不會出現deleteLabel()在酥料餅的按鈕被點擊時甚至被稱爲。彈出窗口內部如何調用這個函數有什麼問題嗎？

來源

2016-07-05 user1893354

因爲無法使用'$ compile'插入包含指令的html。擺脫bootstrap.js並切換到angular-ui-bootstrap。你已經在使用你自己的dom操作，正在走向錯誤的角度學習路徑......尤其是在沒有任何應用程序存在的控制器中 – charlietfl

@charlietfl你能說'應該使用'$ compile'嗎？我是否應該在某處包含'$ compile（a）（$ scope）？ – user1893354

即使你是在把屬性放入....插件也會移動它，插件不會編譯它。這完全錯了。你應該重新開始使用適當的角度方法 – charlietfl

這不是正確的做法。您應該通過directive或使用庫來處理DOM操作，如bootstrap UI

在您的實現中，通過createElement創建的DOM元素沒有被綁定。

來源

2016-07-05 01:55:37

下面是使用ngBootbox更加有效的方法：請參閱working plunkr。一般來說，你想避免在jQuery中人們使用DOM的方式來操作DOM;這是Angular的強項之一，就是要隱藏你的「複雜性」，並且像ngBootbox這樣的指令的使用就是要走的路。如果您想使用jQuery庫，請查找Angular包裝器。

如果我正確理解您的要求，我有兩個彈出窗口...一個添加元素和一個確認刪除元素。

var app = angular.module('plunker', ['ngBootbox']); 

app.controller('MainCtrl', ['$scope', '$ngBootbox', function($scope, $ngBootbox) { 
    var vm = this; 

    vm.name = 'World'; 
    vm.categories = ['Category 1', 'Category 2']; 

    vm.prompt = function() { 

    $ngBootbox.prompt('Enter a new category?') 
     .then(function(result) { 
     console.log('Prompt returned: ' + result); 
     vm.categories.push(result); 
     }, function() { 
     console.log('Prompt dismissed!'); 
     }); 

    } 

    vm.delete = function(index) { 
    console.log('delete index=' + index + ' v=' + vm.categories[index]); 
    $ngBootbox.confirm('Are you sure you want to delete ' + vm.categories[index] + ' ?') 
     .then(function(result) { 
     // Remove element 
     vm.categories.splice(index, 1); 
     }, function() { 
     // Do nothing 
     console.log('Prompt dismissed!'); 
     }); 
    } 
}]);

要添加我所說的提示，人們可以進入一個類別，一旦確認我將它添加到類別的陣列，它會自動添加到頁面。

刪除人員使用ng-repeat的$ index來知道要刪除哪個元素，並且如果用戶確認刪除，則使用拼接將其從數組中移除，並且由於角度綁定，頁面會自動更新。

和HTML：

<body ng-controller="MainCtrl as vm"> 
    <p>Hello {{vm.name}} !</p> 
    <ul> 
    <li ng-repeat="c in vm.categories">{{c}} <a href="" ng-click="vm.delete($index)">Delete</a></li> 
    </ul> 
    <a href="" ng-click="vm.prompt()">Add Category</a> 
</body>

ngBootbox AngularJS包裝的Bootbox.js。 Bootbox.js允許您輕鬆使用Twitter Bootstrap模塊進行javascript警報，確認和提示。 ngBootbox包含三條指令，每條指令用於警報，確認和提示。

Bootbox.js是一個小型JavaScript庫，它允許您使用Bootstrap模塊創建編程對話框，而無需擔心創建，管理或刪除任何所需的DOM元素或JS事件處理程序。這裏有一個最簡單的例子：

另外，由於您剛剛接觸angular，因此我使用控制器作爲語法，並且使用vm = this來避免$ scope問題;這裏是一篇文章：AngularJS's Controller As and the vm Variable

來源

2016-07-05 02:02:55 Gregori

我不明白這與我的問題有何關係。它看起來像你正在添加和刪除數組中的元素。我不得不添加和刪除選定文本的彈出 – user1893354

@ user1893354對不起，我誤解了你的「添加和刪除選定文本的彈出」;你可以顯示你的HTML調用突出顯示，所以我可以重現該問題？ – Gregori

我只是使用'ng-click =「highlight（）」'來調用它。所選的文本來自'window.getSelection（）' – user1893354

這是一個working plunker using the popover.用戶選擇文本的一部分，然後單擊突出顯示...然後鏈接使用您的代碼創建，它會在按下刪除按鈕時調用刪除功能。創建該元素後，我打電話讓NG-點擊作品：

$compile(a)($scope);

我顯示的內容和標記與作爲ID用於刪除選定的文本「爲myContent」股利：

<body ng-controller="MainCtrl as vm"> 
    <p id='mycontent'>{{ vm.content }}</p> 
    <button ng-click="vm.highlight()">Highlight</button> 


    <script type="text/ng-template" id="tpl.html"> 
    <div class="popover-content"> 
     <div> 
     <div> 
      <span>{{link.title}}</span> 
     </div> 
     <div> 
      <button ng-click='vm.delete()'>Delete</button> 
     </div> 
     </div> 
    </div> 
    </script> 
</body>

我的應用基於您的代碼：

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

app.controller('MainCtrl', function($scope, $compile, $timeout) { 
    var vm = this; 
    vm.window = window; 

    vm.content = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum'; 

    vm.delete = function() { 
    console.log('delete' + vm.selectedText); 
    var d = document.getElementById('mycontent'); 

    var olddiv = document.getElementById('todelete'); 

    d.removeChild(olddiv); 
    }; 

    vm.highlight = function() { 

    var a = document.createElement("a"); 

    a.setAttribute('id', 'todelete'); 
    a.setAttribute('uib-popover', ''); 
    a.setAttribute('popover-trigger', 'click'); 
    a.setAttribute('popover-placement', 'top'); 
    a.setAttribute('ng-click', "info()"); 
    a.setAttribute('data-html', 'True'); 
    a.setAttribute('data-content', 'Some content'); 
    a.setAttribute('uib-popover-template', "'tpl.html'"); 


    $compile(a)($scope); 

    if (window.getSelection) { 
     var sel = window.getSelection() 
     var text = ""; 
     if (window.getSelection) { 
     text = window.getSelection().toString(); 
     } else if (document.selection && document.selection.type != "Control") { 
     text = document.selection.createRange().text; 
     } 
     vm.selectedText = text; 
     var range = sel.getRangeAt(0).cloneRange(); 
     range.surroundContents(a); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 

    }; 

    vm.getSelectionText = function() { 
    var text = ""; 
    if (window.getSelection) { 
     text = window.getSelection().toString(); 
    } else if (document.selection && document.selection.type != "Control") { 
     text = document.selection.createRange().text; 
    } 
    return text; 
    }; 

});

來源

2016-07-05 04:44:55 Gregori

回答

相關問題