为什么我的指令抛出“Error: $injector:unpr Unknown Provider”

2024-01-11

我正在努力将我的控制器、工厂和指令重构为推荐的Angular 风格指南 https://github.com/johnpapa/angular-styleguide#file-templates-and-snippets for 角度片段 https://github.com/johnpapa/angular-styleguide/tree/master/assets/sublime-angular-snippets.

我已经使控制器和工厂能够与新样式正常工作,但不能与指令一起工作。

Unknown provider: $scopeProvider <- $scope <- platformHeaderDirective

新的指令风格有错误:

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    directive.$inject = ['$scope'];
    /* @ngInject */
    function directive ($scope) {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    function Controller () {

    }
})();

我的旧工作指令不会引发错误:

(function() { "use strict";

    angular.module('platformHeaderDirectives', [])

    .directive('platformHeader', function() {
        return {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            scope       : false,
            controller  : ['$scope',
                           function($scope) {

                /** Init platformHeader scope */
                // var vs = $scope;

            }]
        }
    });

})();

$scope无法注入指令。我已经更改了注入代码$scope在指令的控制器中。

Code:

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    
    /* @ngInject */
    function directive () {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    Controller.$inject = ['$scope'];
    function Controller ($scope) {

    }
})();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么我的指令抛出“Error: $injector:unpr Unknown Provider” 的相关文章

  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • 在javascript中使用“return !0”有什么意义吗?

    如果您转到谷歌结果页面并运行rwt toString 你会看到这个函数的返回调用是 return 0 我想不出任何理由为什么这不会总是如此true 这只是一个简写吗true 还是还有更多事情发生 总是如此 但下载需要 2 个字节 0是 2
  • 如何使用 LinkedIn javascript sdk 检索包括所有字段的职位列表?

    我想要获取 LinkedIn 会员在其个人资料中输入的每个职位的 ID 头衔 摘要 开始日期 结束日期 当前状态和公司名称 我测试了一个查询休息控制台 https apigee com console linkedin我得到了想要的结果 查
  • 如何根据按钮单击折叠和展开 Kendo UI 树视图中的所有树节点?

    这是行不通的 您可以使用此代码 1 崩溃 折叠kendoTree查看文档 http docs kendoui com api web treeview methods collapse treeview kendoTreeView var
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 如何仅对农业网格中的某些行禁用编辑

    我想根据条件仅启用我的 ag grid 中的某些行 示例 2 5 editable false 没有帮助 因为它应用于整个列表 除非有一个我不知道的方法 请提供任何帮助 你只需绑定即可function to editable财产在colum
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • 向对象添加元素

    我需要填充一个 json 文件 现在我有这样的东西 element id 10 quantity 1 我需要添加另一个 元素 我的第一步是使用该 json 将该 json 放入对象类型中cart JSON parse 现在我需要添加新元素
  • 在 Angular2 项目中集成 Treant-js

    我正在尝试在 Angular2 项目中使用 treant js 但我正在努力解决如何正确集成它的问题 我有一个工作正常的 JavaScript HTML 示例 我正在尝试在 Angular2 中工作 我创建了一个组件 从 npm 添加了 t
  • ng-repeat 指定起始索引

    如何指定 ng repeat 指令将开始的索引而不是零 我有一组结果 我只需要指定起始结果 它不同于零 无需编写任何代码 Angular 已经通过existing内置limitTo https docs angularjs org api
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • ReactJS:从没有 onChange 事件的 props 中选择默认值?

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • Window 与 Var 声明变量[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • RTCDataChannel发送方法不发送数据

    我的 RTCDataChannel 遇到一个奇怪的问题 我正在对 WebRTC 进行一些研究 并且已经可以进行 WebRTC 音频 视频聊天 现在我想使用 RTCDataChannel 添加文本聊天和文件共享 我已经像这样创建了 RTCDa
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • 如何根据所需表单输入的值更改 CSS 样式

    我想知道如何编写 javascript 来改变所需的表单元素的样式 如果它们有价值的话就改变它们 我想要做的是当所需的文本字段为空时 在它们周围有一个彩色边框 并在它们有值时删除边框样式 我想做的是编写一个 javascript 函数来检查
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

随机推荐