1

我见过 $watch 的第一个参数只是一个字符串而不是函数的情况。什么时候使用函数，什么时候使用字符串？

在这个 plunker 中，我以两种方式做到了这一点。控制器中的 $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

这就是$watchAngular 中的定义方式。你可以在这里看到它的文档：$watchdoc

它指出第一个参数$watch可以是以下之一：

  • string: 评估为表达式，或
  • function(scope): 以当前范围作为参数调用
于 2015-09-24T04:49:22.693 回答