방법 여러 컨트롤러의 기능을 재사용

Question

나는 여러 경로에 대해 여러 개의 컨트롤러가 있습니다

app.controller('FirstController', function ($scope) { 
    $scope.func = function() { 
    console.log('route 1'); 
    } 
} 
app.controller('SecondController', function ($scope) { 
    $scope.func = function() { 
    console.log('route 2'); 
    } 
} 
... 

과 $scope.func를 사용하는 지시어,이 방법 :

app.directive('thedirective', function() { 
    return { 
    link: function (scope, $element, attrs) { 
     $scope.func(attrs.thedirective); 
    } 
    } 
}); 

$scope.func 각 컨트롤러에서 다른를 . $ scope.func가 route1에 있고 FirstController가 현재 컨트롤러이고 경로 2에 "route 2"를 기록하지만 "rout 1"만 콘솔에있는 경우 "$ route.func"가 기록 될 것으로 예상합니다. 왜 경로를 변경해도 $ 지침의 범위가 변경되지 않는지 제발 알려주시겠습니까?

Answer 1

고립 범위 내가 다르게 정의 여러 컨트롤러입니다 기능을 재사용을 위해 무엇을 사용했다. 문서에 따라
, 당신은 같은 지침의 범위를 분리 할 때 :

scope: { 
    myIsolatedFunc: '=' 
} 

각도가 요소의 myIsolatedFunc 속성의 값으로 명명 된 속성의 현재 범위를 찾아 볼 것이다.

: 요소와 함께 $scope.func2 같은 함수로 정의 다른 컨트롤러와

<div myIsolatedFunc="func1"> 

다른 경로에 :

함수가 $scope.func1라는 이름의 당신이 한 경우 및 요소가 정의 : 의미

<div myIsolatedFunc="func2"> 

다음 두 가지 기능을 모두 사용할 수 있습니다.

app.directive('thedirective', function() { 
    return { 
    scope: { 
     myIsolatedFunc: '=' 
    }, 
    link: function (scope, $element, attrs) { 
     $scope.myIsolatedFunc(attrs.thedirective); 
    } 
    } 
}); 

다른 기능을 위해 다른 이름을 가질 필요는 없습니다.

Answer 2

기능이 컨트롤러에서 공통적으로 사용되는 경우 각도로 표시됩니다.

모범 사례는 컨트롤러에 삽입되는 사용 서비스 또는 팩토리입니다.

app.factory('commonService', function ($scope) { 
    var obj= {}; 
     obj.func = function() { 
     console.log('route 1'); 
     } 
    obj.func1 = function() { 
     console.log('route 2'); 
     } 
    return obj; 
    } 
    app.controller('FirstController', function ($scope,commonService) { 
     console.log('route 1' + commonService.func()); 
    } 
    app.controller('SecondController', function ($scope,commonService) { 
     console.log('route 2' + commonService.func1()); 
    } 

그리고 우리는 지시에 대해 이야기 할 때, 지침의 범위는 하나의 컨트롤러 지시 컨트롤러 또는 우리가 정의 외부 컨트롤러 중 하나를 함께합니다.

<div ng-controller="firstController"> 
<your-directive /> 
</div> 

<div ng-controller="secondController"> 
<your-directive /> 
</div>