2014-11-05 18 views
0

각도로 동적으로 구성된 div에 컨트롤러를 추가하려고합니다. 그러나 컨트롤러가로드되지 않는 것 같아서 해당 이벤트를 클릭 기능에 추가 할 수 없습니다.AngularJS에서 동적으로 구성된 div에 컨트롤러 추가

아래 예제에서는 'employeeTableCtrl'이라는 별도의 상위 컨트롤러에서이 div를 구성하고 있습니다. 상위 컨트롤러 내에서 사용자가 '추가 정보'버튼을 클릭하면 새 div가 생성됩니다. 이 아이의 콘테이너에서 새로운 콘트롤러를 부착 할 곳을 찾고 있습니다.

.controller('employeeWindowCtrl', [ 
    '$scope', function ($scope) { 
     $scope.close = function() { 
      alert('clicked the x'); 
     } 
    } 
]) 

div의 모든 제대로 구축되고 있지만하여 'employeeWindowCtrl은'내 '클릭은()'함수가되도록 부착되지 않는 :

$scope.moreInfo = function(employee) { 
    $("<div class='employeeWindow' ng-controller='employeeWindowCtrl'> " + 
       "<button class='closeButton' ng-click='close()'> x </button> </div>".appendTo("#employees");  
    } 

그리고

는 별도의 컨트롤러에 내가 가진 실행되지 않습니다.

팁이있는 사람이 있습니까? 어쩌면 내가이 모든 잘못을 저지르고있을 것인가? 링크 기능을 통해 개인 컨트롤러의 종류가 HTML의 덩어리 -

감사

+0

이상한 일을하는 것처럼 보입니다. ng-show는 아마도이 모든 것을 처리 할 것입니다. 그냥 물건을 만들고 조건부로 보여줍니다. –

+0

나는 그것이 틀리게 접근하고 있다고 생각한다. 각도를 사용하여 컨트롤러에서 DOM을 조작하는 대신 필요한 요소를 만듭니다. 컨트롤러는 그렇지 않습니다. 예를 들어'ng-if' 지시어를 사용할 수 있습니다. – akonsu

+0

각도 이외의 코드를 사용하여 html을 삽입하면 각도가 인식 할 수 있도록 '$ compile'을 사용해야합니다. 다른 사람들이 지적했듯이 이것은 끔찍한 접근이다. – charlietfl

답변

0

당신이 찾고있는 지시문입니다. 별도의 템플릿에 지시문을 작성하고 지시문의 링크 기능에 컨트롤러 기능 (컨트롤러에 실제로 적합한 경우)을 배치하고 ng-show를 사용하여 클릭시 표시하십시오. 우리가 더 많은 코드를 가지고 있다면 이것에 대한 더 좋은 예를들 수 있습니다.

https://docs.angularjs.org/guide/directive

관련 문제