1

$watch の最初のパラメーターが関数ではなく単なる文字列であるケースを見てきました。いつ関数を使用し、いつ文字列を使用しますか?

このプランカーでは、これを両方の方法で行いました。コントローラーの $watch は関数を使用しますが、ディレクティブの $watch は文字列を使用します。どちらも機能しますが、一方の場合は関数で、もう一方の場合は文字列である理由についてのルールがわかりません。誰か私にこれを説明してもらえますか?

http://plnkr.co/edit/hSdQcRnvYn16ZeeJyPaM?p=preview

app = angular.module('app', []);
app.controller('mainCtrl', MainCtrl);

function MainCtrl($scope) {
    $scope.myColor1 = 'blue';
    $scope.myColor2 = 'blue';

    $scope.$watch(function(scope) {
            return scope.myColor1;
        },
        function(newValue, oldValue) {
            $scope.myStyle = 'color:' + $scope.myColor1
        }
    );
}


app.directive('fontColor', FontColor);
function FontColor() {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            scope.$watch(attrs['fontColor'], function(newVal) {
                console.log(newVal)
                el.css('color', newVal)
            })

        }
    }
}

HTML:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.5" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="mainCtrl" class="container" style="padding-top:30px">

    <div style="{{myStyle}}">color1</div>
    <input type="text" ng-model='myColor1'>
    <br><br>

    <div font-color="myColor2">color2</div>
    <input type="text" ng-model="myColor2">
</body>

</html>
4

1 に答える 1

2

それ$watchがAngularで定義されている方法です。ここでドキュメントを見ることができます: $watchdoc

$watchの最初の引数は次のいずれかであると述べています。

  • string: 式として評価される、または
  • function(scope): 現在のスコープをパラメータとして呼び出されます
于 2015-09-24T04:49:22.693 に答える