Javascript 范围变量更改时的change指令

我使用http请求从json文件中获取数据，而不是在控制器中使用

    app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) {
   //gets data from service 
        loaderService.getLoadedHtml().then(function (result) {
            $scope.fields = result.data;
        });
    }]);

当此

$scope.fields

更改为时，我需要更新指令

app.directive('dform', function () {
    return {
        scope: {
            action: '@',
            method: '@',
            html: '='
        },
        link: function (scope, elm, attrs) {
            var config = {
                "html": scope.fields
            };

            scope.$watch('fields', function (val) {
                elm.dform(config);
            });

            //console.log(config);
            //elm.dform(config);
        }
    };
})

下面是我如何使用这个指令

<div html="fields" dform></div>

但是在我的例子中，当$scope.fields发生变化时，我得到的

scope

在指令$watch函数中是未定义的

问题：

---

如何获取scope.$watch函数中scope.fields的更新值？

您需要为

字段添加绑定，从而授予该指令对其的访问权限：

scope: {
  action: '@',
  method: '@',
  html: '=',
  fields: '='
}

和HTML：

<dform fields="fields" ...


更新
使用此HTML：

<div html="fields" dform></div>

使用
$parent.fields
而不是
fields
通常对于应该尽可能透明的指令，不应该使用新的作用域。拥有新的作用域还可以防止其他指令在同一元素上请求新的作用域

如果只假设其中一个属性是动态的，那么它就像

scope: false,
link: function (scope, elm, attrs) {
    scope.$watch(function () { return scope[attrs.html] }, function (val) {
        if (val === undefined) return;

        var config = {
            action: attrs.action,
            method: attrs.method,
            html: val
        };

        elm.dform(config);
    });

}

或者，
bindToController
可以以更加现代、经得起未来考验的方式使用（取决于
html
，
$scope.$watch
可以进一步升级到
self.$onChanges
hook）

考虑到
html=“fields”
，上面的代码将监视
字段
作用域属性。
@Umar在具有隔离作用域的指令中使用$parent是反模式的。@estus感谢您的建议。是的，这与模式背道而驰，但我所处的情况是，我无法使用任何比这更好的解决方法。@Umar请看另一个答案，这是正确的答案。从你的问题中看不出为什么它不适用于这里。@estus实际上它是一个jquery插件。这是完整的演示。我只需要字段。所以html在这里对我来说是额外的。@Umar在这种情况下，我建议使用
bindToController
而不是孤立的作用域（如图所示）。它允许在仍然有绑定的情况下维护适当的作用域层次结构。为了更好地理解，我更新了我的问题。
scope.$watch('html', ...

scope: false,
link: function (scope, elm, attrs) {
    scope.$watch(function () { return scope[attrs.html] }, function (val) {
        if (val === undefined) return;

        var config = {
            action: attrs.action,
            method: attrs.method,
            html: val
        };

        elm.dform(config);
    });

}

scope: true,
bindToController: {
    action: '@',
    method: '@',
    html: '='
},
controller: function ($scope, $element) {
    var self = this;

    $scope.$watch(function () { return self.html }, function (val) {
        if (val === undefined) return;

        var config = {
            action: attrs.action,
            method: attrs.method,
            html: val
        };

        $element.dform(config);
    });
}