Question

我见过$ 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>

Answer 1

这就是在Angular中定义$watch的方式。您可以在此处查看相关文档：$watch doc

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

string：评估为表达式，或
function(scope)：使用当前作为参数

为什么$ watch value参数有时候是一个字符串值，有时候是一个函数？

1 个答案: