動的に追加されたhtmlタグのボタンがng-clickを呼び出さない

Question

ng-clickイベントを使用して、追加されたhtmlの作業からボタンを作成しようとしています。私はここでいくつかの解決策を見てきましたが、私にとってはうまくいかないようです。おそらく、私は別の状況があるか、それを正しく使うことができなかったでしょう。私のコードは以下の通りです：

fileMaintenanceCtrl.js

/// <reference path="../angular.js" /> 

angular.module('adminApp') 
.controller('fileMaintenance', [ 
    '$scope', '$http', '$sce', function ($scope, $http, $sce, $compile) { 

     // Adding Client 

     $scope.addNewClient = function() { 
      debugger; 
      alert($scope.addClient.CompanyName); 
     } 

     // End of adding client 


// This is how I get the html template    
$scope.addClient = function() { 
       $http.get('/FileMaintenance/AddClient') 
        .then(function(response) { 
          var divTemplate = response.data; 
          var element = angular.element(document.getElementById('btnAddCompany')); 
          console.log(element.toString()); 
          element.append(divTemplate); 
          $compile(element)($scope); 
         }, 
         function(error) { 
          alert('An error occured in retrieving view. ' + error.message); 
         }); 
      }; 
     } 
    ]); 

addClient.cshtml

<h1 class="text-center text-info">Add Client</h1> 
<br /> 
<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 

     <form role="form" name="formAddClient"> 
      <div class="form-group"> 
       <label for="inputCompany">Company</label> 
       <input id="inputCompany" type="text" 
         class="form-control" ng-model="addClient.CompanyName" name="CompanyName"/> 
      </div> 

      <div class="form-group"> 
       <label for="inputContactPerson">Contact Person</label> 
       <input id="inputContactPerson" type="text" 
         class="form-control" ng-model="addClient.contact_person" name="ContactPerson"/> 
      </div> 

      <div class="form-group"> 
       <label for="inputEmailAddress">Email Address</label> 
       <input id="inputEmailAddress" type="text" 
         class="form-control" ng-model="addClient.email_address" name="EmailAddress"/> 
      </div> 
     </form> 

     <input type="button" id="btnAddCompany" class="btn btn-success" 
       value="Add Company" ng-click="addNewClient()"/> 

    </div> 
</div> 

fileMaintenance.cshtml < - 私はHTMLテンプレートを置く場所です

<div class="active tab-pane" id="file_maintenance"> 
    <div> 
     <a href="javascript:void(0);" ng-click="addClient()">Add Client</a> 
    </div> 
    <br /> 
    <div id="file_maintenance_view_area"> 
     <div ng-bind-html="chosen_view"> 

     </div> 
    </div> 
</div> <!-- End of tab file_maintenance --> 

また、私はこのコードを試してみました：

$scope.addClient = function() { 
    $http.get('/FileMaintenance/AddClient') 
     .then(function(response) { 
      var divTemplate = response.data; 
      var temp = $compile(divTemplate)($scope); 
      var ele = angular.element(document.getElementById('btnAddCompany')).append(temp); 
     }, 
      function(error) { 
       alert('An error occured in retrieving view. ' + error.message); 
      }); 
}; 

を私は、このコードのようにそれを行う場合には、私も私のテンプレートのHTMLを表示するために取得することはできません。

Answer 1

あなたは$compile後スニペットが注入されなければならない：

.then(function(response) { 
    var divTemplate = response.data; 
    var element = angular.element(document.getElementById('btnAddCompany')); 
    element.append(divTemplate); 
    $compile(element)($scope); 
}, 

append()のみ解析され、DOMに挿入されている文字列を追加。 $scopeに行ったリンクは考慮されていません。