All In One指令+服務+控制器

Question

我想知道是否有可能建立一個獨立的指令。

我在AngularJS上非常新，請讓我知道是否有我正在尋找的深層概念錯誤。

我目前的 「嘗試」 是：

(function() { 
    // a module for holding the directive 
    var app = angular.module('monitorApp', []); 

    // a service for getting some data 
    app.service("MonitorService", function ($http, $q) { 
     return ({ 
      getMonitorInfo: getMonitorInfo 
     }); 

     function GetMonitorInfo() { 
      var request = $http({ 
       method: "get", 
       url: "/IndicatorsReport/GetMonitorInfo" 
      }); 
      return (request.then(notifyErrorIfNeed, handleError)); 
     } 

     function handleError(response) { 
      if (!angular.isObject(response.data) || !response.data.message) { 
       return ($q.reject("An unknown error occurred.")); 
      } 
      return ($q.reject(response.data.message)); 
     } 

     function notifyErrorIfNeed(response) { 
      var data = response.data; 
      if (data.status !== "success") { 
       new PNotify({ 
        title: data.title, 
        text: data.text, 
        type: 'error', 
        hide: false, 
        styling: 'bootstrap3' 
       }); 
      } 
      return data; 
     } 
    }); 

//我的實際指令

app.directive('monitorButton', function ($document) { 
     // a self initializing controller 
     var controller = ['$scope', function ($scope, MonitorService) { 
      var vm = this; 
      function init() { 
       MonitorService.GetMonitorInfo().then(function (data) { 
        // this is the actual data 
        vm.feedBots = data.feedBots; 

        // this is fake data yet 
        vm.flags = { 
         cls: 'bg-blue', 
         number: 3, 
         show: true 
        }; 
       }); 
      } 
      init(); 
     }]; 

     //a very simple template 
     var template = '<button type="button" class="btn btn-app">' + 
         ' <span class="badge {{vm.flags.cls}}" ng-show="vm.flags.show">{{vm.flags.number}}</span>'+ 
         ' <i class="fa fa-dashboard"></i> Monitor'+ 
         '</button>'; 

     // my directive params 
     return { 
      restrict: 'EA', 
      controller: controller, 
      scope: {}, 
      controllerAs: 'vm', 
      bindToController: true, 
      template: template 
     }; 
    }); 
}()); 

我打算只將以下代碼添加到我的html頁面（與angularjs沿偏離航向） ：

<script src="/app/directives/monitor.js" type="text/javascript"></script> 

最後，我天真地打算把它想：

<monitor-button></monitor-button> 

編輯

它不工作，我沒有看到網頁中的任何元素。

Answer 1

對於獨立角應用程序，請angular.bootstrap來引導你的頁面上的應用程序，

//monitor.js 
(function(){ 

    var app = angular.module('monitorApp', []); 

    //define your app... 

    //bootstrap your app... 
    angular.bootstrap(document, ['monitorApp']); 

})()