Javascript Angularjs数据传输控制器_Javascript_Angularjs

Javascript Angularjs数据传输控制器

javascript angularjs

Javascript Angularjs数据传输控制器,javascript,angularjs,Javascript,Angularjs,这是一个简单的内联控制器，无法工作。我找不到那只虫子。我已经用ng init测试过了，并用ng repeat打印出来，效果很好。使用ng控制器时，它不会 <html data-ng-app> <head> <title></title> </head> <body data-ng-controller="SimpleController"> Name: <br /> <input type="te

这是一个简单的内联控制器，无法工作。我找不到那只虫子。我已经用ng init测试过了，并用ng repeat打印出来，效果很好。使用ng控制器时，它不会

<html data-ng-app>
<head>
    <title></title>
</head>
<body data-ng-controller="SimpleController">
Name: 
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>


姓名：



{{cust.name}--{{cust.city}

函数SimpleController（$scope）{
$scope.customers=[{姓名：'John Doe'，城市：'New York'}，{姓名：'Jane Doe'，城市：'Melbourne'}，{姓名：'Jack Daniels'，城市：'Atlanta'}]；
}

您需要使用javascript启动应用程序

angular.module

对于在data ng应用程序中指定的应用程序名称

Javascript代码：

angular.module("myApp", [])
    .controller('SimpleController', function ($scope) {
    $scope.customers = [{
        name: 'John Doe',
        city: 'New York'
    }, {
        name: 'Jane Doe',
        city: 'Melbourne'
    }, {
        name: 'Jack Daniels',
        city: 'Atlanta'
    }];
});

评论中有很多闲聊，所以我将在回答中总结一下

正如@squiroid正确指出的那样，全局控制器的使用（意味着定义一个函数，然后只引用它）在最近的Angular版本和1.3中被删除

您必须定义模块并向其注册控制器，因此总体而言，您需要：

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

function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}

myApp.controller("SimpleController", SimpleController); //This is a must now

在您看来，您需要参考您的模块：

<html data-ng-app="myApp">

V31

由于您使用的是1.3，所以您肯定需要引导您的模块，因为在1.3中，像您这样使用控制器作为全局函数已被弃用

请参阅下面的完整工作示例。试试看它是否对你有帮助

<html data-ng-app="customersApp">
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
    var app = angular.module('customersApp', [])
    app.controller('SimpleController', ['$scope', function ($scope) {
        $scope.customers = [
    { name: 'John Doe', city: 'New York' },
    { name: 'Jane Doe', city: 'Melbourne' },
    { name: 'Jack Daniels', city: 'Atlanta' }
        ];
    }]);
  </script>
</body>
</html>


姓名：



{{cust.name}--{{cust.city}

var app=angular.module（'customersApp'，[]）
app.controller（'SimpleController'，['$scope'，函数（$scope）{
$scope.customers=[
{姓名：'John Doe'，城市：'New York'}，
{姓名：'Jane Doe'，城市：'Melbourne'}，
{姓名：'Jack Daniels'，城市：'Atlanta'}
];
}]);

SO1

角度使用模块的最佳实践（我不考虑模块失效时的angular 2.0）：-

对于控制器，使用“controller as”并绑定控制器上的数据，而不是$scope上的数据

<body data-ng-app="myApp" data-ng-controller="SimpleController as ctrl">Name:
    <br />
    <input type="text" data-ng-model="ctrl.name">
    <ul>
        <li ng-repeat="cust in ctrl.customers | filter:ctrl.name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
    </ul>
</body>

您的代码在angular 1.2版本中运行良好

但如果你使用的是angular 1.3+，它不会

使用angular 1.3，您不能再在全局作用域上使用全局控制器声明。您需要使用内联声明定义控制器

在HTML中：

<html data-ng-app="app">

或使用现有控制器：

     angular.module('app', []).controller('SimpleController', SimpleController)

我用Angular 1.2.26和1.3.12做了两个例子

使用1.3.12的示例

<!DOCTYPE html>
<html ng-app="test">
<head>
    <!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>

<body  ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        var app = angular.module('test', []);

        app.controller('SimpleController', function($scope){
             $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        });

    </script>
</body>
</html>


姓名：



{{cust.name}--{{cust.city}

var app=角度模块（'测试'，[]）；
app.controller（'SimpleController'，函数（$scope）{
$scope.customers=[{name:'John Doe'，city:'New York'}，
{姓名：'Jane Doe'，城市：'Melbourne'}，
{姓名：'Jack Daniels'，城市：'Atlanta'}]；
});

这里的主要变化是脚本内部使用了模块和控制器

使用版本1.2.26的示例

<!DOCTYPE html>
<html>
<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" data-ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        function SimpleController($scope){
            $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        }
    </script>
</body>
</html>


姓名：



{{cust.name}--{{cust.city}

函数SimpleController（$scope）{
$scope.customers=[{name:'John Doe'，city:'New York'}，
{姓名：'Jane Doe'，城市：'Melbourne'}，
{姓名：'Jack Daniels'，城市：'Atlanta'}]；
}

这里我做的唯一更改是在body中添加ng app=“”

您使用的是哪个角度版本？角度版本应该小于全局控制器的1.2：-）哦…不，我使用的是1.3.x稳定。要使此代码与1.3兼容，还有其他方法吗？是的，您必须定义应用程序名称，并使用myApp.controller（“SimpleControl”，SimpleControl）注册它定义该函数后。@OmriAharon:您需要定义myApp以指定其控制器方法。在html中将其指定为angular时，angular将尝试在脚本中查找应用程序，并将出错。因为您未指定应用程序名称，但是OP在ng app

中提到了应用程序名称，没有指定应用程序名称。啊，OP使用的是1.2，答案是1.3 gud OmriAharon观测

<!DOCTYPE html>
<html ng-app="test">
<head>
    <!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>

<body  ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        var app = angular.module('test', []);

        app.controller('SimpleController', function($scope){
             $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        });

    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" data-ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        function SimpleController($scope){
            $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        }
    </script>
</body>
</html>