Question

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

我是AngularJS的新手，请告诉我，如果我正在寻找的内容存在深刻的概念错误。

我目前的“尝试”是：

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

//我的实际指令

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

我打算只将以下代码添加到我的html页面（以及当然的angularjs）：

<monitor-button></monitor-button>

最后，我天真地想打电话给它：

SQL Server 2012 SSMS

修改

它不起作用，我没有在页面中看到任何元素。

Answer 1

对于独立的Angular应用程序，请致电angular.bootstrap以在页面上引导您的应用

//monitor.js
(function(){

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

    //define your app...

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

})()

一体化指令+服务+控制器

1 个答案: