Question

我正在使用Angular JS，但不知道为什么找不到变量“ title”。我收到此消息：

NameError: name 'title' is not defined

app.js：

var app = angular.module("octopusApp", []);

app.controller("indexCtrl", ["$scope", function($scope){
    var self = this;
    $scope.title = "";

    console.log("Estoy en la home");
    angular.element(document).ready(function(){
        $scope.title = "Home";
    });
}]);

app.controller("adminCtrl", ["$scope", function ($scope) {
    var self = this;
    $scope.title = "Admin";
}]);

template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Octopus Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src = "{{ static_url('js/app.js') }}"></script>
</head>
<body ng-app = "octopusApp">
    {% block content %}
    {% end block %}
</body>
</html>

index.html

{% extends "template.html" %}
{% block content %}
    <div class = "container" ng-controller = "indexCtrl">
        <div class = "row">
            <div class = "col-md-12" style = "border-bottom: 5px solid #FFFFFF"><h1>{{title}}</h1></div>
        </div>
    </div>
{% end block %}

该错误引用了indexCtrl中的“ title”变量。

我在做什么错了？

编辑我：

我已经像@ Adriani6所建议的那样修改了我的代码，但是它不起作用：（（（（（

index.html

{% extends "template.html" %}
{% block content %}
    <div class = "container" style = "margin-top: 20px" ng-controller = "indexCtrl">
        <div class = "row">
            <div class = "col-md-9">
                <h1>{{!{{title}}}}</h1>
            </div>
            <div class = "col-md-3" style = "padding-top: 20px; text-align: right">
                <a href = "/admin">>> Go To Admin</a>
            </div>
        </div>
        <div style = "margin-bottom: 10px; border-bottom: 5px solid #000000"></div>
        <div class = "row">
            <div class = "col-md-9" style = "text-align: left; width: 100%">
                <input class = "form-control" type = "text" id="url" placeholder="url" />
            </div>
            <div class = "col-md-3" style = "text-align: right">
                <button type="submit" class="btn btn-primary" style = "width: 100%">Send URL</button>
            </div>
        </div>
        <div style = "margin-top: 10px; border-bottom: 5px solid #000000"></div>
    </div>
{% end block %}

编辑II：

我又做了一次测试。我已经测试过控制器已正确加载，并且已加载。但是我不知道为什么我无法访问控制器$ var.name_variable或self.name_varible的任何变量。

在此代码中，您可以看到在加载indexController时，我通过控制台编写了一条消息：

app.js

var app = angular.module("octopusApp", []);

app.controller("indexCtrl", ["$scope", function($scope){
    var self = this;

    angular.element(document).ready(function(){
        console.log("I'm at home!!!");
    });
}]);

app.controller("adminCtrl", ["$scope", function ($scope) {
    var self = this;
    $scope.title = "Admin";
}]);

这是我在Web控制台中看到的：

但是，如果我尝试从index.html访问任何变量，则最初会暴露该错误。

我不知道发生了什么！！

Answer 1

这不是AngularJS错误，而是Tornado。他们两个都使用"{{ }}"。

尝试放入：{{!{{title}}}} ，!括号内的标记应迫使龙卷风忽略并防止在解释标记后评估内容。

如果{{ }}中引用的变量未在范围内定义，AngularJS将不会抛出未定义的错误。

编辑：

您没有看到title变量，因为您将ng-controller设置为indexCtrl，并且未在编辑中定义。

或者-尝试在document.ready外部设置$ scope.title，看看是否可以使用。

Angular JS：找不到变量

1 个答案: