javascript - Angular/ ionic : how can I refresh a directive when I update variables in the controller?

Question

我有“问题” Controller ，它在 HTML 中包含一组针对输入类型的指令:

<my-text ng-attr-ref="{{ref}}" ng-if="type=='text'"></my-text> 
<my-integer ng-attr-ref="{{ref}}" ng-if="type=='integer'"></my-integer> 
<my-decimal ng-attr-ref="{{ref}}" ng-if="type=='decimal'"></my-decimal>

等等

为了在每个问题之间导航，我只是将“ref”更新为下一个问题“ref”，然后更新问题的类型等，angular 根据上面的指令显示相应的输入类型，并隐藏之前的输入。

我在我的指令中针对上述每个问题使用链接功能，以设置问题文本并绑定(bind)到每个问题的答案。

angular.module('question.directives')
/**
* Text directive
*/
.directive('myText', function ($compile, PARAMETERS) {
    return {
        restrict: 'E',
        templateUrl: PARAMETERS.COMPONENTS_PATH + 'question/inputs/text/my-text.html',
        scope: true,
        link: function (scope, element, attrs) {
            // Get closest parent scope
            var parent = scope.$parent;
            // Question input details
            var inputDetails = parent.inputs[attrs.ref].data;
            scope.question = inputDetails.question;
            // Set the answer for this question (based on answers stored in parent scope)
            scope.answer = parent.answers[attrs.ref];
        }
    };
});

这工作正常，直到我从一个文本输入导航到另一个文本输入，并且指令没有更新，所以我连续两次看到相同的问题。从一种类型导航到另一种类型效果很好。

这是为了减少动态变量的闪烁，因为我之前使用 $state.go() 转到同一个 Controller ，重新加载 View ，以及更新的问题详细信息。这样，我就可以重复使用相同的 html，并且只更新我需要的指令，而不是重新创建整个 View 。

有没有其他人遇到过 Ionic 变量在 View 中闪烁的问题，或者有人可以建议我强制 Controller 更新指令的方法吗？我已经在 View 中设置了 cache-view="false"。

Here's a simple plunker .您会注意到，当我从问题 3 到问题 4 单击“下一步”时，我看到了两次问题 3，因为我连续两次使用 my-text 指令。同样，点击问题 5 的“上一个”，会连续两次显示问题 4。

谢谢!

编辑:所以我最后做的是将对象 params 添加到 Controller 范围并将 currentIndex 作为属性添加到它。当我在链接函数中通过 scope.$watch('params.currentIndex', update); 观看时，它正确地调用了更新函数，刷新了我指令中的参数。

我添加了 this新的 plunker 以反射(reflect)我所做的更改。

Answer 1

好的，您正在使用链接函数来更新显示值，但链接函数仅在编译时调用一次。所以在第一页加载时你的指令被编译并调用链接。然后你转到下一个具有不同类型的问题，这会导致 ng-if 触发。现在 ng-if 从 dom 中删除第一个指令并将第二个指令添加到 dom，它现在调用链接方法。

当您保留第一个指令时，它不会调用链接函数，因为您重用了该指令。

我建议只使用标准 Angular 绑定(bind)而不是链接功能，因为它会自动为您更新。

如果您需要更多帮助，我会添加示例代码。

编辑:

angular
    .module('question.directives')
    .directive('myText', MyTextDirective);

function MyTextDirective($compile, PARAMETERS) {
    return {
        restrict: 'E',
        scope: {
            ref: '&'
        },
        templateUrl: PARAMETERS.COMPONENTS_PATH + 'question/inputs/text/my-text.html',
        controller: MyTextController
    };
}

function MyTextController($scope) {
    $scope.$watch(() => this.ref, update);

    function update() {
        $scope.question = $scope.$parent.inputs[this.ref].question;
        $scope.answer   = $scope.$parent.answers[this.ref];
    }
}

它的作用是注册一个带有属性“ref”的指令和一个 Controller 。 Controller 为属性“ref”注册一个观察者，并在每次“ref”的值发生变化时调用 update()。

update() 与您在链接函数中所做的相同，只是格式不同。

现在这不是 super 有效，但它应该可以工作。根据您的 Angular 版本和周围的代码，您可以实现一个组件来获取问题和答案而不是引用，这将消除对观察者的需要。

您还可以公开一个函数，该函数在应显示下一个问题时调用，然后删除观察者。