디렉티브용 다이내믹컨트롤러를 설정하는 방법

디렉티브용 다이내믹컨트롤러를 설정하는 방법

대화는 싸다. 내 코드를 먼저 보여줘라.

HTML:

<div add-icons="IconsCtrl">
</div>

지시:

angular.module('attrDirective',[]).directive('addIcons', function($compile){
return {
    restrict : 'A',
    controller : "IconsCtrl"
    },
    link : function (scope, elem , attrs, ctrl) {
        var parentElem = $(elem);
        var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope);
        parentElem.find(".accordion-heading").append(icons);
    },
}

});

컨트롤러:

function IconsCtrl($scope){
  $scope.add = function(){
    console.log("add");
  };
}

이제 작동하게 되었습니다. 플러스 아이콘을 클릭하면 브라우저 콘솔 출력 "추가"

컨트롤러를 다음과 같이 동적으로 설정하고 싶습니다.

HTML:

<div add-icons="IconsOneCtrl">
</div>
<div add-icons="IconsTwoCtrl">
</div>

컨트롤러:

function IconsOneCtrl($scope){
       $scope.add = function(){
        console.log("IconsOne add");
       };
    }

function IconsTwoCtrl($scope){
    $scope.add = function(){
        console.log("IconsTwo add");
    }
}

directive like:

angular.module('attrDirective',[]).directive('addIcons', function($compile){
return {
    restrict : 'A',
    controller : dynamic set,depends on attrs.addIcons
    },
    link : function (scope, elem , attrs, ctrl) {
        var parentElem = $(elem);
        var icons = $compile("<i class='icon-plus' ng-click='add()'></i>)(scope);
        parentElem.find(".accordion-heading").append(icons);
    },
}
});

어떻게 내 목표를 달성할 것인가?답변 감사합니다!

이제 AngularJS에서 가능합니다.지시문에서는 다음 두 개의 새 속성을 추가합니다.controller,name재산 및isolate scope꼭 필요합니다.

지침에서 주의할 사항

scope:{}, //isolate scope
controller : "@", // @ symbol
name:"controllerName", // controller names property points to controller.

Dynamic Controller for Directives 설정 작업 데모

HTML 마크업:

<communicator controller-name="PhoneCtrl" ></communicator>
<communicator controller-name="LandlineCtrl" ></communicator>

각도 컨트롤러 및 지시:

var app = angular.module('myApp',[]).
directive('communicator', function(){
return {
    restrict : 'E',
    scope:{},
    controller : "@",
    name:"controllerName", 
    template:"<input type='text' ng-model='message'/><input type='button' value='Send Message' ng-click='sendMsg()'><br/>"          
  }   
}).
controller("PhoneCtrl",function($scope){
 $scope.sendMsg = function(){
     alert( $scope.message + " : sending message via Phone Ctrl");
    }
}).
controller("LandlineCtrl",function($scope){
    $scope.sendMsg = function(){
        alert( $scope.message + " : sending message via Land Line Ctrl ");
    }
})

당신의 경우는 아래의 코드 스니펫을 사용해 볼 수 있습니다.

작업 데모

HTML 마크업:

<div add-icons controller-name="IconsOneCtrl">
</div>
<div add-icons controller-name="IconsTwoCtrl">
</div>

각도 코드:

angular.module('myApp',[]).

directive('addIcons', function(){
return {
    restrict : 'A',
    scope:{},
    controller : "@",
    name:"controllerName",    
    template:'<input type="button" value="(+) plus" ng-click="add()">'
  }
}).
controller("IconsOneCtrl",function($scope){
     $scope.add = function(){
        alert("IconsOne add ");
      }
}).
controller("IconsTwoCtrl",function($scope){
     $scope.add = function(){
        alert("IconsTwo add ");
      }
});

방법은 다음과 같습니다.

디렉티브 요소 내에 필요한 것은 컨트롤러의 이름에 접근할 수 있는 속성뿐입니다.이 경우 카드 속성에는 이름 속성을 가진 카드 객체가 포함됩니다.지시문에서 분리 스코프를 다음과 같이 설정합니다.

scope: { card: '=' } 

그러면 카드 개체가 직접 스코프로 분리되고 보간됩니다.그런 다음 지시 템플릿을 다음과 같이 설정합니다.

template: '',

이것은 명령어 컨트롤러에서 명령어라는 이름의 기능을 찾습니다.getTemplateUrl에서는, 를 설정할 수 있습니다.templateUrl역동적으로도 마찬가지입니다.디렉티브 컨트롤러에서는getTemplateUrl함수는 다음과 같습니다.

controller: ['$scope', '$attrs', function ($scope, $attrs) { 
    $scope.getTemplateUrl = function () { return '/View/Card?cardName=' + 
        $scope.card.name; }; }],

mvc 컨트롤러는 적절한 .cshtml 파일을 링크하여 이 루트가 히트했을 때 보안을 처리하지만 일반 각도 루트에서도 작동합니다..cshtml/html 파일에서는 루트 요소로 추가하는 것만으로 다이내믹컨트롤러를 셋업할 수 있습니다.컨트롤러는 템플릿마다 다릅니다.이것에 의해, 컨트롤러의 계층이 작성됩니다.이 계층에서는 일반적으로 모든 카드에 추가 로직을 적용하여 각 개별 카드에 특정 로직을 적용할 수 있습니다.서비스를 어떻게 처리해야 할지 결정해야 하는데 이 방법을 사용하면 컨트롤러 이름만 기준으로 ng-repeat을 사용하여 디렉티브용 다이내믹 templateUrl 및 다이내믹컨트롤러를 생성할 수 있습니다.이 기능은 매우 깔끔한 방법으로 구현되며 모두 자급자족되어 있습니다.

된다: 1-어울리다.var parentElem = $(elem); as elem is a jquery element. This is similar to: $($('#myid'))

2- 디렉티브컨트롤러는 프리링크 단계 전에 인스턴스화되기 때문에 컨트롤러를 동적으로 할당할 수 없습니다.

Attribut에 할 수 있기 에, 기능(컨트롤러내의 을할 수 .attrs['addIcons']

ps. 메모attrs['addIcons']낙타 이름 짓기입니다.

언급URL : https://stackoverflow.com/questions/19444414/how-to-set-the-dynamic-controller-for-directives