2013-10-31 2 views
0

다음 두 가지 지시문이 있습니다. 우리가 issuedesc에서 생성 버튼을 클릭하면 위의 작품 브라우저에서ng-click이 AngularJS에서 작동하지 않습니다.

<body> 
<issuedesc></issuedesc> 
</body> 

, - 첫 번째 (recentisls는) 두 번째 'issuedesc'

directive('recentisls', function ($compile) { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: function ($scope, $element) { 
       $scope.showIsDsc = function() {      
        var el = $compile("<issuedesc></issuedesc>")($scope); 
        $('body').html(el); 
      }, 
      template: '<div ng-click="showIsDsc()"></div>', 
     }; 
    }). 

directive('issuedesc', function ($compile) { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: function ($scope, $element) { 
       $scope.addcomts = function() { 
        alert("A Hello");      
       }; 
      }, 
      template: '<input ng-click="addcomts()" type="button" value="Submit Comments"/>, 
      replace: true 
     }; 
    }) 

HTML 코드를 생성합니다. 우리가 recentisls에서 생성 버튼을 클릭하면

그러나, 브라우저에서

<body> 
<recentisls></recentisls> 
</body> 

는, 위에서 작동하지 않습니다.

답변

0

몇 구문 오류

가 있었다
app.directive('recentisls', function ($compile) { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     controller: function ($scope, $element) { 
      $scope.showIsDsc = function() { 
       var el = $("<issuedesc></issuedesc>").appendTo('body'); 
       $compile(el)($scope) 
      }; 

     }, 
     template: '<div ng-click="showIsDsc()">dd</div>' 
    } 
}).directive('issuedesc', function ($compile) { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     controller: function ($scope, $element) { 
      $scope.addcomts = function() { 
       alert("A Hello"); 
      }; 
     }, 
     template: '<input ng-click="addcomts()" type="button" value="Submit Comments"/>', 
     replace: true 
    }; 
}); 

데모 : Fiddle

+0

이 코드는 나를 위해 작동 - VAR 엘 = $를 ("") .appendTo ('신체'); $ compile (el) ($ scope) – shashankt

0

컨트롤러는 DOM을 $ 사용하여 컴파일하고 조작 할 수있는 정확한 장소가 아니다. 이 작업은 링크 기능에서 수행해야합니다. 귀하의 경우에는 실제로 컴파일 할 필요조차 없습니다. 당신은 통합 할 수있는 NG-경우 템플릿에 :

<div ng-if="!issueDescriptionVisible" ng-click="showIsDsc()"></div> 
<issuedesc ng-if="issueDescriptionVisible"></issuedesc> 

다음 클릭 핸들러 다만 것 :

$scope.showIsDsc = function() { 
    $scope.issueDescriptionVisible = true; 
} 
관련 문제