想jQuery的代碼轉換爲純JavaScript或AngularJS

Question

我的項目已經沒有jquery依賴，所以我想給jquery代碼轉換爲純angular js或javascript，這就是我需要轉換主要是

var container = $('.dynamic-content'); 
container.html('<div ng-controller="TempCtrl"> <h2>About</h2> <h3>{{total}}</h3> <p>Testing the total</p> <button ng-click="update()">Update</button> </div> <script> console.log("begin"); console.log(app.controller); app.controller("TempCtrl", function ($scope) { $scope.total = 0; console.log("inside"); $scope.update = function() { $scope.total = $scope.total + 1; }; }); console.log("end") <\/script>');     
var newScope = angular.element(container).scope(); 
var compile = angular.element(container).injector().get('$compile'); 
compile($(container).contents())(newScope); 

，這是我plunker Pure Angularjs

Answer 1

什麼，我看你需要使用document.queryselector這種方法會做選擇的元素

的伎倆

，如果你想尋求的jQuery到native javascript更多的表達，您可以檢查this site

Answer 2

我很奇怪，爲什麼你有這樣的混合代碼庫。但這裏是：Plunker。

使用ng-show顯示/隱藏動態內容：

<div class="dynamic-content" ng-show="loaded"> 
    <h2>About</h2> 
    <h3>{{total}}</h3> 
    <p>Testing the total</p> 
    <button ng-click="update()">Update</button> 
</div> 

而且不需要TempCtrl，只需移動方法update()控制器AppCtrl。

=============

根據要求，重寫了它使用的指令，而不是（Plunker）。該指令是這樣的：

.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     template: '<div><h2>About</h2><h3>{{total}}</h3><p>Testing the total</p><button ng-click="update()">Update</button></div>', 
     controller: ['$scope', function($scope) { 
     $scope.total = 0; 
     $scope.update = function() { 
      $scope.total += 1; 
     }; 
     }] 
    }; 
    }); 

這樣使用它：

<div class="dynamic-content" ng-if="loaded"> 
    <div my-directive></div> 
</div>