Question

我有这样的指示：

app.directive('selectedForm', function(MainService) {
    return {
        scope: {
            formName: '=currentForm'
        },
        restrict: 'E', 
        link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('formName', function(oldV, newV) {
                console.log(iElm);
                if (someCondition) {
                    MainService.getForm($scope.formName).then(function(re) {
                        iElm.html(re);
                    });
                }
            });
        }
    };
});

但是，问题是我不能注意变化。我在DOM中有一个<select>元素，用于更改currentForm usign ngModel的值。但是，即使我选择了一个选项，watch功能也无效。我错过了什么吗？

Answer 1

您不能像$watch中那样使用angular directive中的相同angular controller。相反，将其更改为以下内容：

将您的html选择元素更改为以下内容：

<select model="selectedElements">
    ...
    ...
</select>

并在您的指令中，将您的$watch更改为：

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.model', function(oldV, newV) {
...

另请参阅：Is it ok watch the scope inside a custom directive?

编辑：

您的案例中要观看<select ng-model='currentForm'> ... </select>的值的代码是：

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.currentForm', function(oldV, newV) {
...

编辑2

根据评论更新：

在你的HTML中

<selected-form ng-model="currentForm"></selectedForm>

并在您的控制器中

...
link: function($scope, iElm, iAttrs, controller) {
            $scope.$watch('iAttrs.ngModel', function(oldV, newV) {
...

编辑3

看到这个更新的plunker：

https://plnkr.co/edit/v5EnmpQ9UtApnM5ErnYi?p=preview

如何监视指令中的$ scope更改？

1 个答案: