動的に追加されたhtmlを指令からスコープにバインドする方法はありますか？

以下は、スコープ変数名を繰り返し、指示文がスコープを使用したときの簡単なスクリプトです。私が必要とする機能は、名前をクリックすると**名前**を追加する必要がありますが、スコープをバインドできませんでした。助けてもらえますか？動的に追加されたhtmlを指令からスコープにバインドする方法はありますか？

<!DOCTYPE html> 
<html> 
    <body> 
    <div ng-app="app" ng-controller="test"> 
     <table> 
     <tr ng-repeat="name in names track by $index"> 
      <td data-usescope=""> {{name}} </td> 
     </tr> 
     </table> 
    </div> 
    <script 
     src="https://code.jquery.com/jquery-2.2.3.min.js" 
     integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" 
     crossorigin="anonymous"> 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module('app', []); 

     app.controller('test', function($scope) { 
     $scope.names = ["Test1","Test2"]; 
     }); 

     app.directive('usescope', 
     function ($compile) { 
      return { 
      link: function (scope, element, attrs) { 
       element.click(function(e) { 
        e.preventDefault(); 
        element.append($compile('<span> Hello {{name}} </span>')(scope)); 
       }); 
      } 
     }; 
     }); 

    </script> 
    </body> 
</html>

出典

2016-04-25 Siva

私は解決策を提案します。実際の例は、-にあります。

<body ng-controller="test"> 
    <div> 
    <table> 
     <tr ng-repeat="name in names track by $index"> 
     <td data-usescope="name"> {{name}} </td> 
     </tr> 
    </table> 
    </div> 
</body> 

app.directive('usescope', 
    function($compile) { 
    return { 
     scope: { 
     'name': '=usescope' 
     }, 
     link: function(scope, element, attrs) { 
     element.click(function(e) { 
      e.preventDefault(); 
      var compiledeHTML = $compile("<span id='span1'> Hello " + scope.name + "</span>")(scope); 
      element.append(compiledeHTML); 
     }); 
     } 
    }; 
    });

出典

2016-04-26 04:33:57

動的に追加されたhtmlを指令からスコープにバインドする方法はありますか？

答えて

関連する問題