Question

这是带有Angular js控制器的简单HTML

＆＃13;

<!DOCTYPE html>
    <html data-ng-app="">
    <head>
        <title></title>
    </head>
    <body>
        //Applied Controller for interacting with view
        <div data-ng-controller="SimpleController">
            <h3>Adding Simple Controller</h3>
            <ul>
                //Binded with data-ng-repeat
                <li data-ng-repeat="cust in customers">
                    {{cust.name +' '+ cust.city}}
                </li>
            </ul>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
        function SimpleController($scope) {
            $scope.customers = [
                {name: 'John Smith', city: 'Pheonix'},
                {name: 'Alan David', city: 'England'},
                {name: 'John Hello', city: 'Arizona'},
                {name: 'John Fosay', city: 'Lester'}
            ];
        }
        </script>
    </body>
    </html>

＆＃13;

此处不显示结果。调试器The controller with the name 'SimpleController' is not registered出错。

这里有什么问题？

Answer 1

这是因为您需要将整个事物包装到模块中，如下所示

<强> HTML

<!DOCTYPE html>
<html ng-app="sampleMod">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body>
        //Applied Controller for interacting with view
    <div data-ng-controller="SimpleController">
        <h3>Adding Simple Controller</h3>
        <ul>
            //Binded with data-ng-repeat
            <li data-ng-repeat="cust in customers">
                {{cust.name +' '+ cust.city}}
            </li>
        </ul>
    </div>


</body>
</html>

Javascript控制器

var app = angular.module('sampleMod', []);

app.controller('SimpleController',  function SimpleController($scope) {
        $scope.customers = [
            {name: 'John Smith', city: 'Pheonix'},
            {name: 'Alan David', city: 'England'},
            {name: 'John Hello', city: 'Arizona'},
            {name: 'John Fosay', city: 'Lester'}
        ];

});

LIVE DEMO

Answer 2

因为@charlietfl已经告诉你需要首先注册角度模块。

请参阅此处的更新示例

#SERVER
import socket

def Main():
    host = "localhost"
    port = 5000

    mySocket = socket.socket()
    mySocket.bind((host,port))

    mySocket.listen(1)
    conn, addr = mySocket.accept()
    print ("Connection from: " + str(addr))
    while True:
            data = conn.recv(1024).decode()
            if not data:
                    break
            print ("from connected  user: " + str(data))

            data = str(data).upper()
            print ("sending: " + str(data))
            conn.send(data.encode())

    conn.close()

if __name__ == '__main__':
    Main()


#CLIENT
import socket

def Main():
        host = '0.0.0.0'#127.0.0.1
        port = 5000

        mySocket = socket.socket()
        mySocket.connect((host,port))

        message = input(" -> ")

        while message != 'q':
                mySocket.send(message.encode())
                data = mySocket.recv(1024).decode()

                print ('Received from server: ' + data)

                message = input(" -> ")

        mySocket.close()

if __name__ == '__main__':
    Main()

此代码在名为“myapp”的角度模块中注册名为“SimpleController”的控制器函数。

Answer 3

您无法像操作一样将控制器绑定到角度应用程序。您需要创建一个app模块并将其添加到您的代码中。只有在该应用内，您才能指定控制器。我在这里更正了代码。

＆＃13;

<!DOCTYPE html>
<html data-ng-app="">

<head>
    <title></title>
</head>

<body ng-app="TestApp">
    //Applied Controller for interacting with view
    <div data-ng-controller="SimpleController">
        <h3>Adding Simple Controller</h3>
        <ul>
            //Binded with data-ng-repeat
            <li data-ng-repeat="cust in customers">
                {{cust.name +' '+ cust.city}}
            </li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        angular.module("TestApp", []);
        angular.module("TestApp").controller('SimpleController', function ($scope) {
            $scope.customers = [{ name: 'John Smith', city: 'Pheonix' },
                                { name: 'Alan David', city: 'England' }, 
                                { name: 'John Hello', city: 'Arizona' },
                                { name: 'John Fosay', city: 'Lester' }];
        })
    </script>
</body>

</html>

＆＃13;

Answer 4

当您使用角度版本1.4.8时，您无法将全局函数用作控制器，而无需将其作为模块的一部分注册，如charlietfl在评论中已经建议的那样。

工作演示：

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('SimpleController',function($scope) {
    $scope.customers = [
                {name: 'John Smith', city: 'Pheonix'},
                {name: 'Alan David', city: 'England'},
                {name: 'John Hello', city: 'Arizona'},
                {name: 'John Fosay', city: 'Lester'}
            ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="SimpleController">
            <h3>Adding Simple Controller</h3>
            <ul>
                <li ng-repeat="cust in customers">
                    {{cust.name +' '+ cust.city}}
                </li>
            </ul>
        </div>

＆＃13;

Answer 5

<!DOCTYPE html>
    <html data-ng-app="app">
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    </head>
    <body>
        //Applied Controller for interacting with view
        <div data-ng-controller="SimpleController">
            <h3>Adding Simple Controller</h3>
            <ul>
                //Binded with data-ng-repeat
                <li data-ng-repeat="cust in customers">
                    {{cust.name +' '+ cust.city}}
                </li>
            </ul>
        </div>
        <script>
        var app = angular.module('app', []);
        app.controller('SimpleController', SimpleController);
        function SimpleController($scope) {
            $scope.customers = [
                {name: 'John Smith', city: 'Pheonix'},
                {name: 'Alan David', city: 'England'},
                {name: 'John Hello', city: 'Arizona'},
                {name: 'John Fosay', city: 'Lester'}
            ];
        }
        </script>
    </body>
    </html>

结果未显示$ Scope

5 个答案: