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

Question

我正在一个 ionic 项目中使用轮播 ( 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);
});

现在，在第二个指令中，有一个渲染函数，调用该函数时将刷新模型和 View ，并添加一个监听器。

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" />并在您的 Controller 集中:$scope.isToBeWatched = true 。另外，对于第二个指令，请使用: <custom-carousel data-is-tobe-reloaded="isToBeReloaded" />并在同一 Controller 中初始化:$scope.isToBeReloaded = false;
2. 如果它是一个独立的指令，有自己的作用域，那么: 有这个scope:{isToBeWatched: '=?', isToBeReloaded: '=?'}, link: function (...) {...}
3. 加载指令后，检查 if (scope.isToBeWatched) ，是 true，这意味着第一个指令已加载/更改，因为我们仅在第一个指令中传递了 attr。现在，发出一个事件，该事件将在 Controller 中监听。在监听器中执行:$scope.isToBeReloaded = true;这又将设置变量 isToBeReloaded在第二个指令的范围内，因为我们传入了第二个指令。
4. 有一个 isToBeReloaded 的观察者并重新加载渲染 fn，如我之前提到的。

粗略代码:

Controller :

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

}