WebStorm Angular 指令范围和 HTML答案

【问题标题】：WebStorm Angular directive scope & HTMLWebStorm Angular 指令范围和 HTML
【发布时间】：2016-05-01 02:58:57
【问题描述】：

由于我是新来的，所以我要自我介绍一下。我的名字是来自荷兰的 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> 元素并没有给我我的名字等，而只是我网站上的原始代码，例如{{info.firstName}}。

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

有人能看出我做错了什么吗？我在这里不知所措。附言我已经更改了控制器中的个人数据，因此呼叫/电子邮件将没有任何用处:)

编辑：我在浏览器 (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 在错误（本机）在 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) 在发（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

Index.html首页的<head>是：

<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>标签并直接插入模板代码时，效果很好：/

【问题讨论】：

听起来像是 Javascript 错误。浏览器控制台输出是什么？
只需将所有代码复制到小提琴中即可。
如果您的页面中有{{info.firstName}}，则表示您有错误。运行调试器（按 F12），重新加载页面并告诉我们是否有错误
你是 sur angular(min).js 加载了吗？
指令模板显示为OP提到的，然后必须加载角度。

标签： javascript html angularjs

【解决方案1】：

这是您在应用程序中的所有代码吗？就像 Alainlb 在 plunkr 中显示的那样，此代码有效。

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

来自 Angular 文档：

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

多个指令请求隔离范围。

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

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

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

检查您的应用是否存在这些情况。

【讨论】：

【解决方案2】：

对不起，打扰了。看起来问题很简单，你的回答给了我正确的方法。

我正在查看指令声明，为了测试，将指令的名称从“personInfo”更改为 testTestTest。这是因为我在指令中调用的模板也称为 personInfo，但带有扩展名 HTML。

这显然成功了。似乎这些陈述受到干扰，现在它可以工作了，我可以继续 :) 谢谢你的帮助:)

【讨论】：