여러 페이지에 걸쳐 사용할 AngularJS 함수를 구성하는 방법은 무엇입니까?

Question

내 모든 AngularJS는 한 페이지에서 하나의 컨트롤러 내에 있습니다. 이제는 컨트롤러가없는 5 페이지와 현재 "FoodCtrl"이있는 1 페이지 모두 6 페이지 전체에 걸쳐 동적으로 툴팁을 작성하는 방법을 만들어야합니다. 내가 만들고있는 함수는 tooltips.json 파일을 읽고 id로이 페이지에 대한 올바른 툴팁을 찾은 다음 툴팁 내용을 DOM에 삽입합니다.

myApp는이 모든 페이지에서 이미 초기화되었습니다. 내가 여기에 정확한 각도 연습에 대한 조언을 찾고 있어요

--> Profile 
--> Information 
--> Test (has controller FoodCtrl) 
--> Payment 

: 너무처럼 작은 평면 계층 구조입니다. 원하는 툴팁 동작으로 "FoodCtrl"을 확장하고 사이트의 다른 페이지에 "FoodCtrl"컨트롤러를 추가해야합니까? 또는 모든 페이지에 대해 고유 한 "툴팁"컨트롤러를 만들어야하며 이미 "FoodCtrl"이있는 페이지에 어떻게 든 통합 할 수 있습니까? 또는 일반 툴팁 팩토리/서비스를 설정하고 "FoodCtrl"에서이 페이지를 참조하고 다른 페이지의 새 컨트롤러를 참조해야합니까?

Answer 1

외부 소스에서 정보를 가져 오는 메커니즘을 별도의 서비스로 추출하여 필요할 때 삽입해야합니다.
유용한 링크
서비스

를 사용 http://docs.angularjs.org/guide/dev_guide.services.creating_services
http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers

예 지시가 있을지

Answer 2

네는, 컨트롤러가있는 페이지에 지금까지 내 AngularJS와의 모든 일을하는 데

var app = angular.module('myApp', []); 
app.service('tooltips', function() { 
    this.getTooptip = function(pageId) { 
     ... 
    }; 
}); 

function myController($scope, tooltips) { 
    $scope.pageId = '<pageID>' 
    $scope.tooltip = tooltips.getTooltip($scope.pageId); 
} 

, 나는에 혼동되었다 컨트롤러가 선언되지 않은 페이지에서 작업하십시오. 답변 : ng-app가 실행되고있는 한 확실합니다. 그래서 페이지가 도구 설명을 요구 한 알아 내기 위해 툴팁라는 지시를 작성, 툴팁을 필요로 각 페이지의 포장 사업부에 툴팁을 추가하고의 데이터를로드하는 서비스를 사용

HTML :.

<div class="pagewrapper" tooltip data-title="unique-page-title"> 

JSON :

[{ 
    "extension": "unique-page-title", 
    "contents": [ 
     { 
      "head": "Tooltip heading one", 
      "content": "information on section 1" 
     }, 
     { 
      "head": "Tooltip heading two", 
      "content": "information on section 2" 
     } 
    ] 
}] 

JS : 당신이 지침에 대해

angular.module('myApp.services', []).service('tooltips', function ($http) { 
     var requestPromise = $http.get('path/to/tooltips.json').then(function (d) { 
      return d.data; 
     }); 
     this.getTooltips = function() { 
      return requestPromise; 
     }; 
}); 

angular.module('myApp.directives', []).directive('tooltip', function (tooltips, $filter) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attr) { 
       var elements = $('.forms .tooltip'), 
        list = [], 
        title = attr.title; 

       //use the promisey service getTooltips to load the tooltips JSON 
       tooltips.getTooltips().then(function (tips) { 
        //Do some things to identify the correct place to insert the tooltip content, and insert it. 
       }); 
      } 
     }; 
    });