小编orl*_*o21的帖子

AngularJS ui-router没有渲染视图

我一直在努力让我的AngularJS应用程序显示基于模板的视图.

问题: UI路由器似乎是正确的"路由"的所有文件,因为模板文件(landing.html)被传递到控制台作为对象(见console.log(result)main.js图).然而,模板文件没有在应用程序中显示<div ui-view></div>.

index.html的:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
@@include('partials/head.html')
<body>

  @@include('partials/header.html')

      <div ui-view></div>

  @@include('partials/footer.html')
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

main.js:

angular.module('myApp', [
  'ui.router'
])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('landing', {
      url: '/',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    });
      $urlRouterProvider.otherwise('/landing');

}])
  .run(['$http', '$templateCache', function($http, $templateCache) {

    $http.get('templates/landing.html', {
      cache: $templateCache
    }).then(function(result) {
      console.log(result);
    });

  }]);
Run Code Online (Sandbox Code Playgroud)

我的模板文件landing.html:

<main class="content">

    @@include('partials/search.html')
    <h2>Show me the contents of landing.html!</h2>

</main>
Run Code Online (Sandbox Code Playgroud)

我正在使用咕噜声并确保让它既可以观看也可以复制/templates到其中/dist …

javascript templates angularjs

1
推荐指数
1
解决办法
521
查看次数

SVG 图像在图标内重复绘制自身

我有一个使用许多 SVG 图像的网站,但有一个 SVG 文件显示不正确,并且似乎在图标内重复出现(下面用红色圈出)。

在此输入图像描述

这只会影响一张图像:

<svg id="_1" data-name="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 215.24">
    <defs>
        <style>.cls-1,.cls-3{fill:#fff;}.cls-2,.cls-3{fill-rule:evenodd;}.cls-2{fill:url(#GradientFill_1);}.cls-3{opacity:0.84;}.cls-4{font-size:188.94px;fill:#1a1a18;stroke:#fff;stroke-miterlimit:5;stroke-width:0.28px;font-family:TimesNewRomanPSMT, Times New Roman;letter-spacing:-0.06em;}
        </style>
        <linearGradient id="GradientFill_1" x1="100.1" y1="90.61" x2="47.48" y2="68.54" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fab400"/>
            <stop offset="1" stop-color="#8e4107"/>
        </linearGradient>
    </defs>
    <title>150x150</title>
    <rect class="cls-1" y="20.64" width="150" height="150" rx="4" ry="4"/>
    <path class="cls-2" d="M72.28,130.67A51.72,51.72,0,1,0,20.56,78.94,51.83,51.83,0,0,0,72.28,130.67Z" transform="translate(0 20.64)"/>
    <path class="cls-3" d="M54.77,59.41,35.47,56q3.27-11.83,11.26-17.51t23.71-5.68q14.28,0,21.3,3.37c4.64,2.26,7.94,5.11,9.83,8.59s2.85,9.83,2.85,19.12l-.31,24.9a87.84,87.84,0,0,0,1,15.69,45.24,45.24,0,0,0,3.81,10.82H87.76c-.55-1.4-1.25-3.48-2-6.23a26,26,0,0,0-.75-2.49,38.15,38.15,0,0,1-11.67,8A33.11,33.11,0,0,1,60,117.3q-12.41,0-19.58-6.77a22.46,22.46,0,0,1-7.16-17.09,23,23,0,0,1,3.27-12.19,21.31,21.31,0,0,1,9.16-8.2q5.88-2.84,17-5c10-1.87,16.89-3.63,20.72-5.24V60.68c0-4.15-1-7.11-3-8.9s-5.89-2.65-11.52-2.65c-3.81,0-6.77.75-8.9,2.28s-3.87,4.18-5.19,8ZM83.4,76.68Q79.32,78,70.41,80c-5.91,1.27-9.8,2.52-11.62,3.71a9,9,0,0,0-4.18,7.52A10.45,10.45,0,0,0,58,98.94a11.66,11.66,0,0,0,8.51,3.27,18.65,18.65,0,0,0,11-3.79,13.46,13.46,0,0,0,5.08-7.08c.54-1.81.83-5.29.83-10.4Z" transform="translate(0 20.64)"/>
    <text class="cls-4" transform="translate(7.8 157.16)">A</text>
</svg>
Run Code Online (Sandbox Code Playgroud)

当我单独显示此图像(在浏览器中单独打开)时,它看起来很正常。

问题:问题可能来自 SVG 中的代码吗?我不是 SVG 专家,但由于它是一百多个图标中唯一显示此行为的图标,因此这是我首先要查找的地方。

编辑1:图像声明为:

 <a href="tool/{{{urlencode product}}}" data-navigo class="tool__format" style="background-image:url(https://assets.doctoolhub.com/{{{getToolLogo product}}})">
Run Code Online (Sandbox Code Playgroud)

编辑2:CSS样式tool__format

.tool__format { …
Run Code Online (Sandbox Code Playgroud)

css svg

1
推荐指数
1
解决办法
2814
查看次数

javascript - 在数组上使用过滤器和匹配方法来查找完全匹配

我正在使用过滤器函数在名为 的数组中查找 JSON 对象arrayList,其中包含例如:

[
 {
   "name": "Markdown",
   "extension": "(.md)"
 },
 {
   "name": "MultiMarkdown",
   "extension": "(.mmd, .txt)"
 }
]
Run Code Online (Sandbox Code Playgroud)

我正在使用以下代码在name字段上搜索并找到具有特定名称的对象的匹配项:

findFormat = (name) => {
  let format = arrayList.filter(function (el) {
    let pattern = new RegExp(name);
    return el.name.match(pattern);
  });
  return format.name
}
Run Code Online (Sandbox Code Playgroud)

因此,如果我正在搜索名称为“Markdown”的对象,则该字符串将通过name上述函数中的参数传递,并且RegExp表达式解析为/Markdown/.

对于过滤器功能本身,我已经实现了MDN 文档底部描述的polyfill

if (!Array.prototype.filter)
        Array.prototype.filter = function(func, thisArg) {
            'use strict';
            if ( ! ((typeof func === 'Function') && this) )
                throw new …
Run Code Online (Sandbox Code Playgroud)

javascript arrays

0
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×2

angularjs ×1

arrays ×1

css ×1

svg ×1

templates ×1