집 > 기사 > 웹 프론트엔드 > AngularJS 초기화 정적 템플릿에 대한 자세한 설명_AngularJS

AngularJS 초기화 정적 템플릿에 대한 자세한 설명_AngularJS

WBOY원래의: 2016-05-16 15:20:021115검색

AngularJS는 ng-app을 통해 자동으로 모듈을 초기화하거나,angular.bootstrap(document, [module])을 통해 수동으로 애플리케이션을 시작할 수 있습니다. 어떤 방법을 사용하든 애플리케이션이 시작된 후 dom 요소는 동적으로 시작됩니다. dom 트리에 추가되었습니다. 각도 명령을 실행할 수 없습니다. 즉, ng-model 및 ng-click을 통해 동적으로 추가된 dom 요소에 데이터와 이벤트를 바인딩할 수 없습니다. 어떻게 해야 합니까?

페이지의 사용자 정보를 수정하기 위해 버튼을 클릭하고, 사용자 정보를 쿼리하기 위해 ajax 요청을 보낸 후, 미리 작성된 정적 템플릿을 템플릿 엔진을 사용하여 컴파일하는 등 DOM 요소를 동적으로 추가하는 것은 매우 일반적입니다. 페이지를 HTML 문자열로 변환합니다. 마지막으로 HTML 문자열을 페이지에 추가하고 표시합니다. 일반적으로 다음과 같이 합니다.

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      $(".contani").html(myTmpl.innerHTML);
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" />
    密码：<input type="text" ng-model="password" />
  </form>
</script>
</body>
</html>

데이터 수정 버튼을 클릭하세요. 새로 삽입된 dom 요소는 ajax가 반환한 데이터에 바인딩되지 않습니다. 이는 버튼을 클릭하기 전에 각도가 초기화되었기 때문입니다. 물론 해결 방법은 다시 초기화하는 것이 아니라 사용하는 것입니다. $compile을 사용하여 정적 컴파일 템플릿의 HTML이 DOM 트리에 삽입됩니다.

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      //$(".contani").html(myTmpl.innerHTML);
      $(".contani").append( $compile(myTmpl.innerHTML)(scope) )
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" ng-change="valchange()" />
    密码：<input type="text" ng-model="password" ng-change="valchange()" />
  </form>
</script>
</body>
</html>

위 내용은 AngularJS 초기화 정적 템플릿에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

성명：

이전 기사：브라우저 환경에서 JavaScript 스크립트 로딩 및 실행 분석: 지연 및 비동기 특성_javascript 기술다음 기사：브라우저 환경에서 JavaScript 스크립트 로딩 및 실행 분석: 지연 및 비동기 특성_javascript 기술

AngularJS 초기화 정적 템플릿에 대한 자세한 설명_AngularJS

관련 기사