동적으로 추가 각도 지시

Question

내가 각도 JS에 비교적 새로운 해요 및 그것을 가파른 학습 곡선을 발견하고, 나는 느낌 메신저 정말 여기에 요점 그러나 여기 간다 얻을 :

내가에 지시문을 추가 할 내 컨트롤러에서 페이지. 그래서 나는 지시어 태그를 페이지에 추가하면 지시어와 연관된 컨트롤러/템플릿 등이 추가 될 것이라고 생각했다. $ compile 메소드에 대해 읽은 후에, 나는이 지시어를 새로 생성 된 태그에 바인딩하는 데 사용될 것이라고 생각했다. 이 부분은 아래에 주석 처리되어 있습니다 만, 이것의 유무에 관계없이 표시 할 로그인과 컨트롤러를 제어하는 ​​단어가 필요합니까?

지시어 태그가로드 타임에 페이지에있을 때 비슷한 웹 예제를 많이 발견 할 수 있습니다. 따라서이 태그는 $ compile 메소드와 관련 있다고 생각합니다. 나는 무엇을 놓치고 있습니까?

HTML :

<div ng-app="application" ng-controller="myController"></div> 

JS : 위의 코드는 여기에 있습니다

var myApp = angular.module('application', []); 

myApp.controller('myController', ['$scope', function($scope) { 

     function showLoginDirective() { 
      $scope.login = angular.element(document.createElement('login')); 

      angular.element(document.body).append($scope.login); 
     }; 

     showLoginDirective(); 
    } 
]); 

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: 'LoginController', 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should I not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

: http://jsfiddle.net/d5n6L/7/

Answer 1

당신은 정말 동적 각도가있는 페이지에 요소를 추가 할 수 없습니다. jQuery 배경에서 비롯된 많은 사람들은 우리가이 연습을 계속하고 필요할 때 페이지에 물건을 추가 할 수 있다고 가정합니다.

그러나 Angular를 사용하면 로직을 마크 업에서 모두 볼 수 있습니다. 그게 무슨 뜻 이죠? 귀하의 경우에 상관없이 무엇이든지 지침을 가지고 있어야하며 ng-show 또는 ng-hide 또는 ng-class으로 가시성을 제어해야합니다.

<login ng-show="showLogin"></login> 

을 그리고 당신은 프로그램으로 당신은 당신의 지시어를 사용할 수 있습니다

그래서,이 같은 일이 가장 좋은 것입니다.

인라인 컨트롤러를 정의 할 수도 있습니다 (의존성 배열과 해당 종속 함수를 지시문의 controller 속성으로 할당). 그것은 모든 관련 코드를 같은 장소에 유지합니다.

예를 들면,

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: ['$scope', function($scope) { 

       function showLoginDirective() { 
        $scope.showLogin = true; 

       }; 

       showLoginDirective(); 
       } 
      ], 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should i not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

Answer 2

보다는 컨트롤러 내에서 동적으로 컴파일 난 당신이 NG-경우에 사용하는 것이 좋습니다 DOM에 어떤 DOM 요소가 있어야하는지 선언적으로 표현합니다.

HTML

<div ng-app="application" ng-controller="myController"> 
    <div ng-if="showLogin" login></div> 
</div> 

JS는

var myApp = angular.module('application', []); 

myApp.controller('myController', ['$scope', function($scope) { 

     function showLoginDirective() { 
      $scope.showLogin = true; 
     }; 

     showLoginDirective(); 
    } 
]); 

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: 'LoginController', 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should i not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

Answer 3

나는 컨트롤러에서 내 페이지에 지시문을 추가하고 싶습니다.

로그인을 표시할지 여부를 결정하는 부울 변수를 $ scope에 정의 할 수 있어야합니다.

$scope.loginShouldBeShowing = false; 
$scope.showLogin = function() { 
    $scope.loginShouldBeShowing = true; 
}; 

에만 로그인 템플릿을 표시하려면이 변수가 true

<login ng-if="loginShouldBeShowing"></login> 

당신은에서 수정 된 JSFiddle에서 볼 수

로 설정되어있는 경우는 그 다음 ngIf 지시어로, 템플릿이 사용할 수 있습니다 당신이 link 기능은 afte 후 실행 콘솔에서 볼 수 있도록

http://jsfiddle.net/jK9zr/2/

은 또한 버튼을 추가했습니다 R 그래서, 당신은 버튼을 누르면 loginShouldBeShowing는 true

지시문 태그가로드시 페이지에있을 때 나는 웹의 주위에 유사한의 예를 많이 찾을 수 있습니다로 설정됩니다, 그 잘 작동하도록 얻을 수 있습니다 이것은 $ compile 메소드와 관련이 있다고 생각하는 것입니다.

필자가 이해하고 이전에 사용했기 때문에 특정 상황에서만 사용되는 지시문을 템플릿에 포함시키는 것이 일반적입니다. 예를 들어 특정 $ scope 변수가 ngIf 또는 ngSwitch 또는 ngShow를 사용하여 특정 값으로 설정하십시오. 한 번에 사용할 수도 있고 사용하지 않을 수도있는 템플릿의 모든 부분을 컴파일하려고하면 일이 너무 복잡해질 것이라고 생각합니다. 나는, AngularJS와 만 상대 초보자 해요하지만 지금까지 나는 오직 때문에

, 사용자 정의 지침의 특성을 평가할 때 컴파일 $ 사용 했어

<login after-login="doThisFunction()"></login> 

다음 $ 사용에 doThisFunction() 전화를 컴파일해야 할 수도 있습니다 적절한 지점.

작은 사이드 바를 사용하면 변수 이름이 컨트롤러에서 템플릿의 현재 상태와 관련이 있음을 알 수 있습니다. 컨트롤러에서 일종의 모델/비즈니스 "상태"를 유지 한 다음 템플릿에 적절한 것을 표시하는 것이 더 일반적입니다. 그래서 당신은 컨트롤러에있을 수 있습니다 : 템플릿에

$scope.loginState = 'loggedOut'; 

그리고 다음을 :

<login ng-if="loginState == 'loggedOut'"></login> 

편집 : 나는 또한 로그인 지시어는 응용 프로그램의 나머지 부분에 다른 모듈에 있었던 것으로 나타났습니다. 이것이 문제를 야기한 것 같아서 JSFiddle에서 그 부분을 수정하여 하나의 모듈 만 만들었습니다.

편집 : 나는 $ compile과 $ parse 사이에 혼란 스럽다. 그래서 나는 $ compile을 사용하는 것에 대한 docs/other sources를 점검 할 것이다.