Angular.js入門(2)控制器

2 年 ago
清, 扬
6 minutes

控制器的引入

下一篇：Angular.js入门（3）过滤器

控制器是Angular中将模型和视图进行关联并进行操作的组件。为了进行具体说明，我们将以上次的HTML作为例子。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <input type="text" ng-model="hello">
    <div class="{{hello}}">ここが装飾される</div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
</html>

让我们在这个表单部分应用控制器试试看。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="hello">
        <div class="{{hello}}">ここが装飾される</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
</html>

在添加了ng-controller属性的div内部，它将被放置在名为FirstCtrl的控制器的作用域中。现在，我们将把控制器的处理逻辑分离到外部文件中。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <div class="{{data.message}}">ここが装飾される</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

function FirstCtrl ($scope) {
    $scope.data = {message: "panel"}
}

控制器以Angular的scope对象作为参数。可以确认在main.js中编写的FirstCtrl的scope属性中定义的data.message = panel将作为class属性应用。

panelによる装飾

多个控制器 (Duō gè qì)

这次我会再放入一个手柄来尝试。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾1</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾2</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

function FirstCtrl ($scope) {
}

function SecondCtrl ($scope) {
}

每个控制器都有自己的作用域，尽管控制器没有进行任何处理，但是请注意，即使在相同的data.message中定义了内容，每个输入框中输入的内容仍然会独立地反映出来。

2つのコントローラ

在这种情况下，如果想在两个控制器之间共享值，该怎么办呢？这就是ng-app的出场时机。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "共有されるメッセージ"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;
}

通过将ng-app名称设置为”myApp”，我们使用myApp的factory方法定义了一个名为Data的服务。通过在每个控制器中将该服务作为参数包含进去，我们可以在不同的控制器之间共享相同的数据。

データの共有

可以确认相同的值是共享的，并且输入栏之间也是相互关联的。

在范围内定义函数

您也可以在控制器内部自定义定义函数。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{reversedMessage()}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "これはテストです"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;

    $scope.reversedMessage = function () {
        return $scope.data.message.split("").reverse().join("");
    }
}

只是简单地将数据字符串进行反转而已。将方法添加到$scope中，可以在ng-controller内的HTML中随意调用。

メソッド定義

然而，在上述的例子中，由于在reversedMessage函数内部使用了$scope变量，所以

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{reversedMessage(data.message)}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "これはテストです"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;

    $scope.reversedMessage = function (text) {
        return text.split("").reverse().join("");
    }
}

像这样，在控制器内定义函数并传入参数，在html上将实际数据作为参数传入会更简洁。

✖
广告
将在 10 秒后关闭
bannerAds