WebStorm Angular 指令范围和 HTML

Posted 2023-02-23

技术标签:

【中文标题】WebStorm Angular 指令范围和 HTML【英文标题】：WebStorm Angular directive scope & 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提到的，然后必须加载角度。 【参考方案1】：

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

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

来自 Angular 文档：