는 방법에 도달하는 기능에서 지시문에 정의되어 있는 인라인 컨트롤러

Question

이 있는 경우 directive, 는 자신의 controller 에서 정의의 신체:

directives.directive("formWrapper", ['User','$location',  function(User, $location) {

    return {
       ...
       template: '<div>' +
                   '<input ng-click="cancel()" type="button" value="Cancel"/>' +
                   '<input ng-click="save()" type="button" value="Save" />' +
                  '</div>',

       controller: function($scope, $location, User) {

            $scope.fields = User.get( {username: "username"}  );

            var save = function() {...}

            var cancel = function() {...}          
        }
    }
}]);

에 template 섹션 노력하고 도달하는 기능 save() 고 cancel() 에 정의되어 있는 컨트롤러입니다.

지금 작동하지 않을 클릭하면 해당 버튼을 아무 일도 일어나지 않습니다.

내가 정말 원하지 않을 정의할 save() 고 cancel() 에 $scope, 기 때문에 이 지시어를 사용합니다.또 어쩌면 그것은 이를 확인에 있는 그들 $scope?에 대한 확실하지 않는 격리입니다.

Q: 는 방법을 달성할 수 있습니다?일반적인 솔루션/비전에 대해는?

Answer 1

당신이 필요하 넣 save() 고 cancel() 에서 지시어의 범위 그래서 템플릿을 그들을 볼 수 있습니다(지금은 그들이 내부에서만 볼 수 컨트롤러 기능).

그래서 그 대신:

var save = function() {...}
var cancel = function() {...}  

할

$scope.save = function() {...}
$scope.cancel = function() {...}  

그것은 잘 이해에 있는 지시어 범위가 있습니다.그것과 같지는 않지에 넣어 $rootScope 는 전 세계에서 사용할 수 있습니다.

을 알 수 있을 추가 이를 지침:

scope: {},

이 $scope 제한되는 단지 이 지침(AKA"고립 범위").그래서 당신처럼 생각할 수 있는 객체 또는 함수 범위-당신은 오염 글로벌 네임스페이스가 있습니다.

여기에서의 데모: http://jsfiddle.net/uLfLM/1/