刷新/重新加载angularjs自定义指令

refresh/reload angularjs custom directive

本文关键字：angularjs 自定义 指令 加载 新加载 刷新      更新时间：2023-11-27

我正在使用转盘(https://market.ionic.io/plugins/morph-carousel)在离子项目中。这是一个自定义angularjs指令。我在一个屏幕上使用两个转盘。现在，我想要的是，在更改第一个转盘时，第二个转盘也应该更新为新值。为此，必须重新加载/刷新第二个转盘自定义指令。有没有一种方法可以刷新/重新加载angularjs中的自定义指令？

在link函数的第一个指令中添加一个观察程序。

scope.$watch('thingToWatchForRefershing', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) {
        return;
    }
    scope.$emit('somethingChangedInFirstDirective', dataToBePassed);
});

现在，在第二个指令中，有一个render函数，当被调用时，它将刷新模型和视图，并添加一个监听器。

link: function () {
    scope.render = function () {
        // all logic goes here
    };
    scope.$on('somethingChangedInFirstDirective', function (ev, data) {
        // render everything again i.e. reload the directive
        scope.render();
    });
    // first time rendering
    scope.render();
}

希望有帮助：）

更新：

  1. 仅将属性传递给第一个指令。例如：<custom-carousel data-is-to-be-watched="isToBeWatched" />，在您的控制器集中：$scope.isToBeWatched = true。此外，对于第二个指令，使用：<custom-carousel data-is-tobe-reloaded="isToBeReloaded" />，并在同一控制器中初始化：$scope.isToBeReloaded = false;
  2. 如果它是一个独立的指令，有自己的作用域，那么：有这个scope:{isToBeWatched: '=?', isToBeReloaded: '=?'}, link: function (...) {...}
  3. 一旦加载了指令，请检查if (scope.isToBeWatched)是否为true，这意味着加载/更改了第一个指令，因为我们只在第一个指令中传递了attr。现在，发出一个事件，该事件将在控制器中被侦听。在监听器do:$scope.isToBeReloaded = true;中，它将在第二个指令的作用域中设置变量isToBeReloaded，因为我们传入了第二个命令
  4. 如前所述，为isToBeReloaded设置一个观察程序，并重新加载渲染fn

粗略代码：

控制器：

$scope.isToBeWatched = true;
$scope.isToBeReloaded = false;
$scope.$on('somethingChangedInFirstDirective', function () {
    $scope.isToBeReloaded = true;
});

指令：

scope: {
isToBeWatched: '=?',
isToBeReloaded: '=?'
},
 link: function (scope) {
 scope.render = function () {
    if (scope.isToBeWatched) {
        scope.$emit('somethingChangedInFirstDirective');
    }
 };
 scope.render();
scope.$watch('isToBeReloaded', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) 
         return; 
    scope.render();
})
}
相关文章：