AngularJS와 -의 값을 기준으로 나머지 API에서 필터 결과 텍스트 상자

Question

OK - 그래서 나는 다음과 같은 서비스가 있습니다

angular.module('myApp.services', ['ngResource']) 
    .factory('STLineup', function($resource){ 
     return $resource('http://someapi.com?filters=location.eventInstance.slug:Slug,artists.tags:ArtistTags,location.name:LocationName', 
      {Slug: '@Slug', ArtistTags: '@ArtistTags', LocationName: '@LocationName'}) 
     }); 

그리고 다음 컨트롤러 :

angular.module('myApp.controllers', []) 
    .controller('MyCtrl1', ['$scope', 'STLineup', function($scope, stl) { 

    $scope.items = {}; 

    stl.get({'Slug': ':xxxxx-2014', 'ArtistTags': ':electronic|grime', 'LocationName': ':Snakepit'},function(response) { 
     $scope.items = response.results; 
    }); 

    $scope.changeCallback = function() { 
     stl.get({'Slug': ':xxxxxx-2014', 'ArtistTags': ':electronic|grime'},function(response) { 
     $scope.items = response.results; 
    }); 
    } 
}]); 

그리고 다음 지시문을 :

angular.module('myApp.directives', []) 
    .directive('appLineup', [function() { 
     return { 
      restrict: 'AEC', 
      scope: { 
       items: '=', 
        change: '&changeCallback' 
      }, 
      link: function(scope, elem, attrs){ 

      }, 
      templateUrl: 'templates/lineup.html' 
     }; 
    }]); 

다음 템플릿은 다음과 같습니다.

인터페이스에 추가 5,

<input type="text" ng-model="LocationName" ng-change="change()" /> 
<br/> 
<div class="item" ng-repeat="item in items"> 
    <p class="title">{{item.name}}</p> 
</div> 

다음 사용 :

<app-lineup items="items" change-callback="change()" /> 

휴!

초기 데이터가로드되고 있지만 change 이벤트가 실행되지 않습니다. 여기서 내가 뭘 잘못하고 있니?!

다음은 app.js의 코드입니다.

angular.module('myApp', [ 
    'ngRoute', 
    'ngResource', 
    'myApp.filters', 
    'myApp.services', 
    'myApp.directives', 
    'myApp.controllers' 
]). 
config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'}); 
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'}); 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 

Answer 1

change() 함수는 컨트롤러의 범위에 선언되어 있지만 지시문은 격리 범위 (즉, 부모로부터 프로토 타입을 상속받지 않는 지시문)를 사용하기 때문에 아무 것도 알지 못합니다.
이 같은 지침의 범위에 전달할 수 :

<!-- The VIEW --> 
<app-lineup items="items" change-callback="change()" /> 

/* The DIRECTIVE */ 
... 
scope: { 
    ... 
    change: '&changeCallback' 
} 

Answer 2

scope.change = function() { 

차례로 아무것도 할 템플릿의 변화()을 허용하지 않습니다 당신의 $를 잊어.

scope.items = response.results; 

$을 잊어 버렸습니다.