refresh/reload angularjs 自定义指令

Question

我在离子项目中使用轮播 (https://market.ionic.io/plugins/morph-carousel)。这是一个自定义 angularjs 指令。我在一个屏幕上使用 2 个轮播。现在，我想要的是在第一个旋转木马发生变化时，第二个旋转木马也应该更新为新值。为此，第二个旋转木马自定义指令必须是 reloaded/refreshed。有没有办法在 angularjs 中 refresh/reload 自定义指令？

Answer 1

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

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

现在，在你的第二个指令中，有一个渲染函数，调用时会刷新模型和视图并添加一个侦听器。

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)，是否为真，这意味着第一个指令是 loaded/changed，因为我们仅在第一个指令中传递了 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();
})

}

refresh/reload angularjs 自定义指令

refresh/reload angularjs custom directive

javascript

angularjs

angularjs-directive

ionic-framework

angular-directive

更新：