个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
因为我是新来的，所以我会 self 介绍。我叫 Tomas，来自荷兰，我刚刚开始密集编码。 Atm 我正在做一个项目，使用 AngularJS 给我写一份交互式简历。我想这样做，所以我在申请工作时可以展示一些东西。因此，有些事情我可能比他们做得更努力，只是为了展示我目前能做些什么。
好了，回到问题。我在 HTML 正文代码中使用 AngularJS 指令时遇到了问题。
.JS 文件是:
/**
* Created by Tomas on 24-1-2016.
*/
var myApp = angular.module("PersonApp",[])
.controller("TomasInformation", ["$scope", function($scope, $routeParams) {
$scope.tomas = {
firstName: "Thomas",
lastName: "Slepers",
middleNames: "Dirk",
dateOfBirth: new Date("1985","03","18"),
placeOfBirth: "Rosmalen",
city: "Maastricht",
address: ["Banniersborg", "176", "B", "6238 VS"],
telephone: "+31 6386492",
email: "t.example@example.com",
nationality: "Dutch"
};
}])
.directive('personInfo', function() {
return {
restrict: "E",
scope: {
info: "="
},
templateUrl: 'JS/personInfo.html'
};
});
我调用的模板 .html 文件是:
<ul>
<li>{{info.firstName}} {{info.lastName}} </li>
<li>{{info.firstName}} {{info.middleNames}}</li>
<li>{{info.dateOfBirth | date}}</li>
<li>{{info.placeOfBirth}}</li>
<li>{{info.city}}</li>
<li>{{info.address[0]}} {{info.address[1]}}{{info.address[2]}}, {{info.address[3]}}</li>
<li>{{info.telephone}}</li>
<li>{{info.email}}</li>
<li>{{info.nationality}}</li>
</ul>
我在 Index.html 主页中使用的 html 代码是:
<div class="right_information" ng-app="PersonApp" ng-controller="TomasInformation">
<person-info info="tomas"></person-info>
</div>
现在的问题是调用 <person-info> element 不给我我的名字等，只给我网站上的原始代码，例如{{info.firstName}}。
我已经检查了一些事情，比如是否加载了 Angular 库(是这种情况)。
有人能看出我做错了什么吗？我在这里不知所措。附言我已经更改了 Controller 中的个人数据，因此打电话/发送电子邮件将没有任何用处:)
编辑:我在我的浏览器 (Chrome) 中完成了 F12 操作并看到了以下错误输出，但似乎无法理解它的含义。我在 https 中添加了星标，因为我不被允许发布超过 2 个链接 :).angular.js:11655 错误:[$compile:multidir] http://errors.angularjs.org/1.3.15/ $compile/multidir?p0=personInfo&p1=personInfo&p2=template&p3=%3Cperson-info%20info%3D%22tomas%22%3E 出错时( native ) 在 https*://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 在 Na (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:67:19) 在 fa (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:62:4) 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:406 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113 在 n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15) 在 n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106) 在 n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293) 在 l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240)(匿名函数)@angular.js:11655
还有 <head> Index.html 的首页是:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="JS/app.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
所以我很确定 angular.min.js 已加载。因为当我删除 <person-info>标签并直接插入模板代码，效果很好:/
最佳答案
这就是您在应用程序中的所有代码吗？就像 Alainlb 在 plunkr 中展示的那样，这段代码有效。
但是您看到的错误是由指令冲突引起的。
来自 Angular 文档:
Example scenarios of multiple incompatible directives applied to the same element include:
- Multiple directives requesting isolated scope.
- Multiple directives publishing a controller under the same name.
- Multiple directives declared with the transclusion option.
- Multiple directives attempting to define a template or templateURL.
检查您的应用是否存在这些情况。
关于javascript - WebStorm Angular 指令范围和 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34981790/
24
4
0
我环顾四周，但我只找到了过去版本的答案。我有一个新版本的 WebStorm，我想从命令行打开我的项目，但是 wstorm . 和 webstorm . 似乎不起作用。 我试过去 工具 > 创建命令行启
是否可以调整 WebStorm，以便当我的终端窗口中有类似内容时，我只需单击文件名并跳转到它。 最佳答案 无法使用内置终端(请为 IDEA-118566 和 IDEA-154439 投票)。 Awes
有没有一种简单的方法来获得 WebStorm 的可移植(USB 内存棒)安装？ 我在 'Net 上找到了一些关于如何为 PHPStorm 执行此操作的帖子(将 .exe 文件重命名为 .zip，解压并
我使用 Webstorm 来调试我的应用程序。设置断点效果很好，调试器将命中我的断点。如果我在 node_modules 内的脚本内设置断点，那么它就不再工作了。它应该与 WebStorm 有关，因为
在 Visual Studio 中，当我键入一些特殊字符(如 ;})时，它会自动格式化相关的代码段，但在 WS 中，什么也没有发生。我试图找到那个选项，但没有结果。 // e.g. In VS, if
我有一个实时模板 useS 用于 const [$VAR1$, set$VAR2$] = useState($END$); 其中 useState 是一个必须像这样导入的外部变量: import {
我想在特定文件夹中运行一些测试。 如果我右键单击该文件夹，我希望有一个“运行..”选项，以便能够运行这些测试。我依稀记得以前的 WebStorm 版本可以做到这一点。 如何在 WebStorm 中运行
我正在寻找一种将双引号(默认行为)更改为单引号的方法。我已经阅读了文档并尝试在线搜索，但正常的搜索方式似乎不起作用。 我已经修改了 package.json以各种方式，都没有奏效，这是我的最新尝试:
我的 webstorm ide 不会再在我现有的 Node.js 项目中的断点处停止。 当我创建一个新的 webstorm node.js express 项目并设置调试点时，它似乎工作正常。 例如，
我正在尝试让 WebStorm 在使用 Angular Material 时自动完成一些 HTML 属性值。 编辑器 > 检查 > HTML > 未知的 HTML 标签属性 我在这里添加了一些属性，如
我感兴趣的是，是否有一种方法可以表明应该在哪里开始写变量名 例如，如果我将此实时模板称为： console.log('$TEXT$', $TEXT$); ^ 它将从第一个TE
我想在 WebStorm 中禁用代码折叠。可以关闭折叠指示器，但折叠本身仍然有效。我想摆脱整个事情，所以不可能以任何方式激活它。这可能吗？ (没有任何明显的选择，但我希望我错过了一些东西......)
我正在尝试 WebStorm 编辑器(目前使用 vim)。 我注意到我无法分辨行尾在哪里，因为您可以在代码编辑器中将光标移动到行尾之外。 我觉得这非常令人沮丧。我过去常常能够确定该行的结尾在 vi 中
我正在尝试在 webstorm 中更改我的项目名称。 我看过this在他们的开发者论坛上回答，但不适用于此版本(Webstorm 7)。更改 .idea/.name 的内容不会更改项目文件夹 View
我正在尝试 webstorm，自动完成下拉列表中的选项过于冗长 例如: 我怎样才能将其降低到可管理的水平？事实上，自动完成对 api 发现毫无用处。 最佳答案 尝试使用实际对象，最好是带有 JSDoc
有没有人遇到过 ESLint 没有在 WebStorm 中加载的问题？我正在尝试指定路径 /usr/local/bin/eslint , /usr/local/bin , 每次我收到这条消息: 或 n
WebStorm 中是否有设置允许滚动到最后一行，就像最新的 Visual Studio 允许的那样？我不喜欢在文件末尾保留 20 行新行，这样我就可以在屏幕中间工作。 最佳答案 设置 |编辑 |一般
我不小心创建了一个没有扩展名的文件，并且选择了错误的文件类型关联。我认为是文本文档。我将其重命名为具有 .js 扩展名，这正是我想要的，但现在它卡住了，没有任何语法突出显示。 WebStorm 不会将
我已申请this theme到 WebStorm，但我不喜欢它。 如何恢复到 WebStorm 的默认设置？ 最佳答案 根据您使用的操作系统，您应该能够删除配置文件，WebStorm 将重新创建它。
在设置>代码样式> JavaScript中，我已将制表符大小和缩进设置为4。为什么WebStorm仍然忽略这些设置，正如您在预览窗口中看到的: 哪些设置可以覆盖这些设置？ 最佳答案 如果您启用了 Ed
我是一名优秀的程序员,十分优秀！