小编Kat*_*tie的帖子

我试图运行Angular Materials的一个例子,但对于我的生活,我无法弄清楚为什么我会收到这个错误.

我得到的错误是 Error: $injector:modulerr Module Error

这是我得到的错误报告:链接

任何想法可能是什么问题？我几乎从他们的示例网站上复制粘贴了这个.

这是代码:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {

});

.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }

.buttondemoBasicUsage md-content {
  margin-right: 7px; }

.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }

.buttondemoBasicUsage .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> …

这很难解释,但我以前从未经历过这样的事情.我还创建了一个GIF来显示问题的样子.

我第一次打开我的chrome扩展并进行搜索时,iframe的工作完全正常.第二次打开我的Chrome扩展程序并进行搜索时,iframe消失了(请参阅GIF).

正如您所看到的那样,iframe突然消失,没有明显的原因,如果我右键单击并进入inspect element并编辑最无关的项目,那么突然之后iframe重新出现.

我可以尝试一个简单的解决方案吗？正如我所说,当我inspect element在chrome中切换视图中的任何代码时,它会重新出现.

这是搜索的代码:(我正在使用jquery自动完成功能进行搜索)

$('#searchBox').autocomplete({
lookup: footballers,
lookupLimit: 5,
minChars: 3,
onSelect: function (suggestion) {
    $("#searchBox").blur();     
    $('.fullcard').css('display', 'block');
    $('.fullcard').append('<i id="closeCard" class="material-icons">close</i><iframe src="https://www.example.com/'+suggestion.data+'"></iframe>');
},
lookupFilter: _autocompleteLookup,
formatResult: _autocompleteFormatResult, 
});

有什么想法/想法吗？非常感谢它.

我正在构建一个 chrome 扩展，我想storage.sync.get在用户访问该网页时将动态（来自）css 注入网页。使用我当前的实现，它在技术上是有效的，但是，页面加载，加载后它会注入新的 css，这使得它看起来非常慢。我想在 dom 加载之前加载 css。那可能吗？

这是我目前拥有它的方式：

注入.js：

chrome.storage.sync.get("color", function(storedTheme) {
     $('.theme-wrap').removeClass('selected');
     $('.' + storedTheme.color).addClass('selected');
     path = chrome.extension.getURL("src/options/themes/" + storedTheme.color + ".css");
      $('<link/>', {
      rel: 'stylesheet',
      type: 'text/css',
      href: path
    }).appendTo('head');
});

这是我的 manifest.json content_script 信息：

"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": ["src/inject/inject.css", "src/inject/font-awesome.min.css"],
    "js": ["js/jquery/jquery.min.js", "src/inject/inject.js"],
    "run_at" : "document_end"
 }]

在src/inject/inject.css似乎DOM，这正是我想要的东西之前加载，但我希望它为用户指定的css文件的工作。有谁知道我怎么能做到这一点？谢谢

我正在使用Angular Material我的网格系统。我试图生成SVG和它应该告诉我的元素的宽度，但它是getBoundingClientRect()正在恢复300px，尽管其宽度618px。我再次尝试使我的窗口变小，但它仍然显示为300px即使这次它实际上是100px..

这是我的 HTML：

<div layout="row" layout-wrap layout-padding>
    <div flex="33" ng-repeat="result in ctrl.results">
        <svg height="100%" width="100%" position>
          <rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
          <text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Hello World</text>
        </svg>
    </div>
</div>

这是我对该position属性的angularjs 指令：

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

app.directive('position', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            var rect = element[0].getBoundingClientRect();
            var text = element.children()[1].getBBox();
            console.log(rect)
        } …

我正在从内容脚本向后台页面发送消息。该消息是一个 URL，然后在后台解析 ajax。当我 console.log 检索到background.js控制台日志中的数据是纯 html 时，但是当我将消息发送回我的内容脚本时，消息突然出现在一个对象中，我不知道为什么。

这是我的代码：

Content_Script.js：

chrome.runtime.sendMessage({greeting: URL}, function(response) {
      console.log(response.farewell); //logs an object: Object {farewell: Object}
      $('#stats-table2').append(response.farewell); //doesn't output anything.
    });

背景.js：

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
      getStats(message, sender, sendResponse);
      return true;
});

function getStats(message, sender, sendResponse){
   $.ajax({
     url: message.greeting,
     dataType: 'text',
     success: function(data) {
          var info = $("<div>").html(data)[0].getElementsByTagName("table")[1];
          if(info != undefined) {
            console.log(info); //logs pure HTML into the console..
            sendResponse({farewell:info}); //sends message back.
          }

      }
  });
}

我已经为重要部分添加了评论。我似乎无法弄清楚这一点，这让我发疯。有任何想法吗？谢谢！