중첩 된 방식으로 사전 정의 된 지시문 (ng-click)을 사용자 정의 지시문과 함께 사용하려면 어떻게해야합니까?

Question

ngSearchBar.html의 버튼을 사용하려면 어떻게해야합니까? child 지시문 (ng-click)에 대해 부모 지시문 (ngSearchBar.html)과 동일한 범위를 사용하여 scope.search = function() {};을 수행 할 수 있습니다. 내 부모 지시어에. 내 지시어를 사용하고 어디

myAppControllers.constant('baseDomainConstant', 'http://127.0.0.1:5000/v1/'); 

myAppControllers.factory('technologiesFactory', ['$resource', 'baseDomainConstant', function($resource, baseDomainConstant) { 
    return $resource(baseDomainConstant + 'technologies.json', {}, null); 
}]); 

myAppControllers.directive('ngSearchBar', ['technologiesFactory', function(technologiesFactory) { 
return { 
    restrict: 'A', 
    templateUrl: "partials/ngSearchBar.html", 
    replace: true, 
    scope: false, 
    link: function (scope, element, attributes) { 
     var data = ''; 

     scope.search = function() { 
      console.log('TESTING'); 
     }; 

     element.find('#search').on('click', function() { 
      alert(JSON.stringify($('.select2').select2('data'))); 
     }); 

     technologiesFactory.get().$promise.then(function(result) { 
      _.forEach(result.data, function(technologyNames, category) { 
       data += '<optgroup label="' + category + '">'; 
       _.forEach(technologyNames, function(technology) { 
        data += '<option value="' + technology.technology_id + '">' + technology.webname + '</option>'; 
       }); 
       data += '</optgroup>'; 
      }); 

      element.find('#multi-append').append(data); 
      $('.select2').select2('enable', true); 

     }); 
    }, 
    controller: ['$scope', function($scope) { 
     $('.select2').select2({ placeholder: 'Search' }); 
     $('.select2').select2('enable', false); 

     $scope.search = function() { 
      console.log('TESTING'); 
     }; 

    }] 
}; 
}]); 

myAppControllers.controller('ViewCtrlv2', ['$scope', function($scope) { 
     $scope.search = function() { console.log('Testing'); }; 
    }] 
); 

이 "파셜/ngSearchBar.html입니다

<div class="control-group"> 
<div class="controls"> 
    <div class="input-append"> 
     <select id="multi-append" class="select2" multiple="multiple" style="width:400px;"></select> 
     <button class="btn" type="button" ng-click="search()"> 
      <i class="icon-search"></i> 
     </button> 
    </div> 
</div> 

. html로.

<div class="wrapper dashboard inc-footer"> 

<div ng-include="'partials/header.html'"></div> 

<span data-ng-search-bar></span> 

<div class="sticky-footer" ng-include="'partials/footer.html'"></div> 

</div> 

Answer 1

ng-click 템플릿 작동합니다 내부 지시문이 부모 범위를 공유하도록하려면를 입력해야합니다. 지시문 정의 객체에서.

p.s. 또한 jQuery 플러그인을 추상화하려는 경우 관심이 있지만 select2 래퍼 지시문이 작성되었는지는 알 수 없습니다. angular ui select2