编辑：

Question

编辑：

请注意，这个问题没有重复，因为他们在控制器中使用了$ watch question，但我在链接功能中使用了它。

我已经创建了一个包含jstree jquery插件的指令，如下所示：

(function () {
    'use strict';

    angular.module('XYZ').directive('myTree', myTreeDirective);

    myTreeDirective.$inject = ['$http', '$compile'];

    var tree = {};
    var config = {};

    function myTreeDirective($http, $compile) {

        function plugins(scope, element, attrs, config) {
            //some code
            return config;
        }

        function events(scope, element, attrs) {
            //some code
            return config;
        }

        function init(scope, element, attrs) {
            plugins(scope, element, attrs, config);
            tree = $(element).jstree(config);
            events(scope, element, attrs);
        }

        /*
         * Link function
         */
        function linkFn(scope, element, attrs) {
            $(function () {
                config.core = {};
                if (attrs.treeCore) {
                    config.core = $.extend(config.core, scope[attrs.treeCore]);
                }

                if (attrs.treeData === 'scope') {
                    scope.$watch('ngModel', function (n, o) {
                        if (n) {
                            config.core.data = scope.ngModel;
                            $(element).jstree('destroy');
                            init(scope, element, attrs, config);
                        }
                    }, true);
                }
            });
        }

        // expose directive
        return {
            restrict: 'E',
            link: linkFn,
            scope: {
                ngModel: "=",
                treeTypes: "=treeTypes"
            }
        };
    }
})();

由于我正准备申请Angular 2迁移，我正在为$watch函数寻找替代方案：

scope.$watch('ngModel', function (n, o) {
    if (n) {
        config.core.data = scope.ngModel;
        $(element).jstree('destroy');
        init(scope, element, attrs, config);
    }
}, true);

我考虑使用Object.defineProperty，但这用于定义属性，而我正在做的是在更改ngModel值时执行代码。

从谷歌搜索中我发现我可以使用$onChanges和$doCheck生命周期挂钩，但我不知道如何使用它们来替换上面的代码。

Answer 1

由于您正在准备angular2，我会说ES6类是一个选项。使用ES6类，您可以为您的属性定义一个setter函数。

在Angularjs指令的链接函数中替代$ watch

编辑：

1 个答案: