làm thế nào để tái sử dụng một hàm trong nhiều bộ điều khiển

Question

Tôi có nhiều điều khiển cho nhiều tuyến đường:

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

và một chỉ thị mà sử dụng $scope.func, theo cách này:

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

$scope.func là khác nhau ở mỗi điều khiển . Tôi mong $ scope.func đăng nhập "route 1" khi chúng ta đang ở route1 và FirstController là bộ điều khiển hiện tại và để ghi "route 2" khi ở route 2, nhưng chỉ "rout 1" là cái tôi có trong console. bạn có thể vui lòng cho tôi biết tại sao thay đổi tuyến đường không thay đổi $ phạm vi chỉ thị?

Answer 1

Isolated Phạm vi là những gì tôi được sử dụng để tái sử dụng một hàm được định nghĩa khác nhau là nhiều bộ điều khiển.
theo tài liệu, khi bạn cô lập phạm vi của chỉ thị như:

scope: { 
    myIsolatedFunc: '=' 
} 

góc sẽ nhìn lên phạm vi hiện tại cho một tài sản có tên là giá trị của myIsolatedFunc tài sản của phần tử. có nghĩa là:

nếu bạn có một hàm có tên $scope.func1 và một yếu tố định nghĩa là:

<div myIsolatedFunc="func1"> 

và trong một đường với bộ điều khiển khác một chức năng như $scope.func2 cùng với một yếu tố định nghĩa là:

<div myIsolatedFunc="func2"> 

bạn có thể sử dụng cả hai chức năng trong chỉ thị:

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

chưa kể đến không cần phải có tên khác nhau cho các chức năng khác nhau.

Answer 2

Trong AngularJS nếu chức năng đang được sử dụng phổ biến trong bộ điều khiển.

Thực tiễn tốt nhất là sử dụng dịch vụ hoặc nhà máy sẽ đưa vào bộ điều khiển.

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()); 
    } 

Và khi chúng tôi nói về chỉ thị, phạm vi của chỉ thị sẽ có một bộ điều khiển hoặc bộ điều khiển chỉ thị hoặc bộ điều khiển bên ngoài mà chúng tôi đã xác định.

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

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