Question

我一直在使用chrome扩展程序中的angularjs，但我遇到了模板没有显示在扩展程序弹出窗口中的问题。当我点击扩展图标时，它只会显示一个没有我指令内容的小弹出窗口，并且Chrome开发工具中不会显示任何错误。

我一直致力于以一种方式编写它，以便将来更容易过渡到angular2，因此没有控制器。

我不确定我是否遗漏了一些明显或我正在做的事情与Chrome扩展程序的工作方式不兼容。

popup.html

<!DOCTYPE html ng-csp>
<html>
    <head>
        <!--<script src="/scripts/script.js"></script>-->
        <script src="/scripts/angular.min.js"></script>
        <script src="/scripts/controller.helloWorld.js"></script>
    </head>
    <body ng-app="MyApp">

    <helloWorld></helloWorld>

    </body>
</html>

controller.helloWorld.js

(function () {

    'use strict';

    angular.module('MyApp', []).directive('helloWorld', function() {

        function HelloCtrl() {            

        var vm = this;

        vm.hello = "";

        vm.sayHello = function() {
             vm.hello = "Hello World!"; 
            };
        }

        return {
        template: [
            '<div>',
                '<p>',
                    '{{helloWorld.hello}}',
                '</p>',                
                '<button ng-click="helloWorld.sayHello()">Say Hello</button>',
            '</div>'
        ].join(''),
        scope: {},
        controller: HelloCtrl,
        controllerAs: 'helloWorld',
        bindToController: true
    };
});

})();

的manifest.json

{
    "manifest_version": 2,

    "name": "action point manager extension",
    "description": "This extension allows users to collaborate on action point lists",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Action point manager"
    },
    "permissions": [
        "activeTab"
    ]
}

Angularjs chrome扩展程序不会返回模板

0 个答案: