WebStorm Angular指令作用域和HTML

Question

WebStorm Angular指令作用域和HTML

3

自我介绍一下，我叫Tomas，来自荷兰，刚开始热衷于编程。目前我正在使用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>元素不会给我我的名字等信息，而只会给我网站上的原始代码，例如{{info.firstName}}。

我已经检查了一些事情，比如Angular库是否已加载（这是情况）。

有人能看出我做错了什么吗？我很迷茫。附注：我已经在控制器中修改了个人数据，因此打电话/发送电子邮件将没有任何用处 :)

编辑：我在浏览器（Chrome）中进行了F12操作，看到以下错误输出，但似乎无法理解其含义。由于我不能发布超过2个链接，因此在https中添加了星号 :) . 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 at Error (native) at https*://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 at Na (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:67:19) at fa (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:62:4) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:406 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113 at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15) at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106) at n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293) at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240) (anonymous function) @ angular.js:11655

而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>标签并直接插入模板代码时，它可以正常工作 :/

- Togren

刚把你的所有代码复制到一个 Fiddle 上，它就可以正常工作了。 - Prashant

如果您的页面中有 {{info.firstName}}，那么这意味着您有一个错误。运行调试器（按 F12），重新加载页面，并告诉我们是否有错误。 - AlainIb

你确定 Angular(min).js 已经加载了吗？ - AlainIb

我用你的代码制作了一个 Plunkr。http://plnkr.co/edit/xlms2dRmljP9LBSxRJLQ?p=preview - AlainIb

可能尝试将Angular升级到更高版本。不确定是否能解决问题，但更改CDN版本号很简单。 - charlietfl

显示剩余3条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prashant · Answer 1

这是你在应用程序中的全部代码吗？就像Alainlb在plunkr中展示的那样，这段代码是有效的。

但是你看到的错误是由于指令冲突引起的。

根据Angular文档：

多个不兼容指令应用于同一元素的示例场景包括：

多个指令请求隔离作用域。

多个指令发布具有相同名称的控制器。

使用插入选项声明的多个指令。

多个指令尝试定义模板或templateURL。

检查你的应用程序是否存在这些情况。

- Togren · Answer 2

很抱歉打扰您。问题似乎非常简单，而您的答复给了我正确的方向。

我正在检查指令语句，并为了测试的目的，将指令的名称从"personInfo"更改为testTestTest。原因是我在指令中调用的模板也被称为personInfo，但后缀是HTML。

显然，这个小动作解决了问题。这些语句似乎互相干扰，现在一切都正常工作了，我可以继续了 :) 谢谢您的帮助 :)