AngularJs - 在休息调用和 DOM 更改后执行 Jquery 插件

Question

我正在运行 AngularJS 来管理 WebApp 和操纵 DOM 的 jQuery 插件（我没有选择混合或两者都不混合）。

这是我的html

<ul jQuery-plugin-directive="{{changeAfterSuccess}}">
    <li ng-repeat="var in varList">
    {{var.attr}}
    </li>
</ul>

这是指令

app.directive('jQueryPluginDirective',['$timeout', function (timer) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var myFunctionToExecuteAfterDomMod = function(){
                      //element.myPluginJquery
            }
    }
    };
}]);

这是我的控制器：

app.controller('homeController', ['$scope', 'anHttpService', function ($scope, documentService) {
        anHttpService.getVarList().success(function (result) {
            $scope.varList = result.var;
            //$scope.changeAfterSuccess = "sthg";
        });
    }]);

如果我在 myFunctionToExecuteAfterDomMod 上使用 0 毫秒的计时器，它就不起作用。

如果我使用 attrs.$observe("jQueryPluginDirective", myFunctionToExecuteAfterDomMod) 并更改 changeAfterSuccess。 这不起作用。

我成功使用它的唯一方法是使用超过 10 毫秒的计时器。但我不想使用这种丑陋的解决方案。

这确认 myFunctionToExecuteAfterDomMod 在 {{var.attr}} 更改之前被调用，这就是它不起作用的原因......

现在搜索了2个小时的解决方案，我很绝望，我希望有人有一个好的解决方案。

巴斯蒂安

更新

我现在做我应该做的事情。我确信这一点，因为当我应用简单的 DOM 修改（如 css 值更改）时，它运行良好。问题是插件 jstree 如果我不设置 200 毫秒计时器，它就不起作用......我现在将使用“解决方案”，然后找到一种不使用插件的方法。

Answer 1

您可能需要将变量作为单独的参数传递：

app.directive('jQueryPluginDirective',['$timeout', function (timer) {
    return {
        restrict: 'A',
        scope: {
           data: "="
        },
        link: function(scope, element, attrs) {
            var myFunctionToExecuteAfterDomMod = function(){
                      //element.myPluginJquery
            }
            scope.$watch('data', function(newVal, oldVal){
               alert('data changed'); // probably want to use console.log() here instead
            }
        }
    };
}]);

那么您的 HTML 将如下所示：

<ul jQuery-plugin-directive data="changeAfterSuccess">

更新：

另外，为什么不在指令中传递数据并生成 html：

控制器 HTML：

<jQuery-plugin-directive change="{{changeAfterSuccess}}" data="varList"></jQuery-plugin-directive>

指令中的JS

app.directive('jQueryPluginDirective',['$timeout', function (timer) {
    return {
        restrict: 'A',
        scope: {
           data: "=",
           change: "="
        },
        template: "<ul> 
                       <li ng-repeat="var in varList">
                           {{var.attr}}
                       </li>
                   </ul>", // concatenate these lines in to a string
        link: function(scope, element, attrs) {
            var myFunctionToExecuteAfterDomMod = function(){
                      //element.myPluginJquery
            }
            scope.$watch('data', function(newVal, oldVal){
               alert('data changed'); // probably want to use console.log() here instead
            }
        }
    };
}]);

Answer 2

虽然 EliteOctagon 已经说过所有内容，但这里是一个向您展示如何使用观察者的最小指令：

    app.directive('makered', function() {
      return {
        restrict: 'AC',
        controller: function($scope) {
          return $scope.$watch(function(e) {
            $('.item').css('color', rcolor);
          });
        }
      };
    });

看看这个Plunker怎么用，然后试着理解EliteOctagons代码。 （不能在 plunker 中使用 ajax，所以我模拟了范围更改）