角度jsイオンのコントローラから属性を追加できません

Question

私はangularjsを使用しています。私はsearch.On検索で、ユーザーに検索し、ナビゲートしようとしています、私は、anglejsコントローラからHTMLを作成し、ビューに表示されます。

しかし、奇妙なことに、htmlでは属性クラスを追加できますが、idやng-clickは追加できません。私はちょうどクリックでアクションを実行できるように、HTMLにng-clickを追加したいだけです。クリックすると、特定のユーザープロファイルに移動します。

ここに私のコードです、それを見直し、私が間違っている場所を教えてください。

.controller('searchDesignCtrl', function($scope,$http,api_root) { 
    $scope.html = '<div class="button-bar"><a class="search-item"><i class="ion-person"></i>Username</a><a class="search-item"><i class="ion-person"></i>Username</a><a class="search-item"><i class="ion-person"></i>Username</a><a class="search-item"><i class="ion-person"></i>Username</a><a class="search-item"><i class="ion-person"></i>Username</a><a class="search-item"><i class="ion-person"></i>Username</a></div>' 
    $scope.searchuser = function(element){ 
     $scope.value_input = $(element.currentTarget).val(); 
     var link = api_root+'users/search_users'; 
     $http({ 
      url: link, 
      method: "POST", 
      data: 'uname=' + $scope.value_input, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
      }).success(function (data, status, headers, config) { 
       $scope.fetched_users = data.data; 
       $scope.html ='<div class="button-bar">'; 
       $.each($scope.fetched_users, function(key,value){ 
        //here ng-click is not added in the view 
        $scope.html+= '<a class="search-item '+value.User.id+'" ng-click="navigate_to_user()"><i class="ion-person"></i>'+value.User.username+'</a>'; 
       }); 
       $scope.html +='</div>'; 
//    console.log($scope.html); 
      }).error(function (data, status, headers, config) {}); 
    } 
    $scope.navigate_to_user=function(){ 
     console.log($scope); 
    } 
}) 

Answer 1

回答ありがとうございます。 角度によって提供される$ comipleサービスを使用して、私はこれを修正することができます。ここでdocumentionです：私の場合は$compile

がHTMLを表示するために、私はコンパイルディレクティブを書いた：

.directive('compile', function($compile) { 
     // directive factory creates a link function 
     return function(scope, element, attrs) { 
     scope.$watch(
      function(scope) { 
      // watch the 'compile' expression for changes 
      return scope.$eval(attrs.compile); 
      }, 
      function(value) { 
      // when the 'compile' expression changes 
      // assign it into the current DOM 
      element.html(value); 

      // compile the new DOM and link it to the current 
      // scope. 
      // NOTE: we only compile .childNodes so that 
      // we don't get into infinite loop compiling ourselves 
      $compile(element.contents())(scope); 
      } 
     ); 

とビューで私は書いた：

<div compile="html"></div>  //uses the $compile directive