Question

我在离子项目中使用轮播（https://market.ionic.io/plugins/morph-carousel）。这是一个自定义的angularjs指令。我在一个屏幕上使用2个旋转木马。现在，我想要的是，在更换第一个转盘时，第二个转盘也应该更新新值。要做到这一点，必须重新加载/刷新第二个轮播定制指令。有没有办法在angularjs中刷新/重新加载自定义指令？

Answer 1

在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();
}

希望有所帮助：）

更新

仅将属性传递给第一个指令。例如：<custom-carousel data-is-to-be-watched="isToBeWatched" />并在您的控制器集中：$scope.isToBeWatched = true。此外，对于第二个指令使用：<custom-carousel data-is-tobe-reloaded="isToBeReloaded" />并在同一控制器中初始化：$scope.isToBeReloaded = false;
如果它是一个孤立的指令，有自己的范围，那么：有这个scope:{isToBeWatched: '=?', isToBeReloaded: '=?'}, link: function (...) {...}
加载指令后，检查if (scope.isToBeWatched)是否为真，这意味着第一个指令被加载/更改，因为我们只在第一个指令中传递了attr。现在，发出一个事件，它将在控制器中被监听。在监听器中执行：$scope.isToBeReloaded = true;，它将在第二个指令的范围内设置变量isToBeReloaded，因为我们传递了第二个指令。
拥有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();
})

}

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

1 个答案:

更新