使用指令将具有范围访问权限的功能附加到html元素

Using a directive to attach a feature with scope access to html element

本文关键字：功能 元素 html 权限 访问权 指令 访问 范围      更新时间：2023-09-26

我想创建两个搜索字段A和B。当用户在A中输入值时，他们会在<ul></ul>中得到一些结果，可以从中进行选择。现在，如果用户从a中选择一个结果（点击<li>），我希望也为B选择这个结果（让我们称之为输入辅助）。该值应由控制器存储在字段B上，直到用户也选择使用字段B为止。然而，A和B都是指令，因为我需要重用它们几次。此外，我希望输入辅助功能也是一组指令，因为我也需要将这些指令与其他表单字段一起重用。这就是事情变得更加疯狂的地方。基本上，我很难在使用不同指令和控制器创建的所有作用域之间传递数据。也许我应该用一种完全不同的方法？

这是给我带来麻烦的指令。我在ctrl.selection上设置了一个$scope.$watch，但它不会开火（plnkr）：

[...]
function assistReceiver() {
    return {
        require: "^inputAssist",
        link: function (scope, element, attrs, ctrl) {
            console.log("receiver: " + ctrl.selection);
            console.log(ctrl);
            scope.$watch(ctrl.selection, function (newVal, oldVal) {
                console.log(ctrl);
                console.log("receiver: " + newVal);
                attrs.scSelection = newVal;
                attrs.scModel = newVal;
            });
        }
    };

}

ctrl.selection在此控制器中创建：

[...]
function InputAssistController(inputAssist) {
    var vm = this;
    vm.selection = "";
}

然后，还有sender指令，它可以访问相同的变量和控制器。该指令的工作是从属性中侦听变量，并在变量更改时激发：

[...]
function assistSender() {
    return {
        require: "^inputAssist",
        link: function (scope, element, attrs, ctrl) {
            console.log(scope);
            console.log(ctrl);
            scope.$watch(attrs.scWatch, function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    ctrl.selection = newVal;
                }
            });
        }
    };

}

在这里您可以看到使用了哪些属性。其他指令的代码在plunker中：

<!DOCTYPE html>
<html>
...
<body ng-app="searchbox">
<input-assist>
    <search-box assist-sender sc-watch="sCtrl.inputModel"></search-box>
    <search-box assist-receiver sc-selection="sCtrl.selectedLens" sc-model="sCtrl.inputModel"></search-box>
</input-assist>

</body>
</html>

你知道它为什么不开火吗？我是在用一种完全无用的方法吗？我尝试过不同的方法，但我想这次我真的很接近了。

我不知道我是否正确理解了你的问题：你想根据另一个值更改一个值，并想为此使用指令，因为更改总是相同的，可能发生在不同的地方。

那么，你只需要一个指令：

angular
.module('searchbox')
    .directive('react', react);
react.$inject = [];
function react(){
  return {
    restrict: 'A',
    scope: {
      react: '=',
      affect: '='
    },
    link: function (scope, element, attrs) {
      scope.$watch('react', function(newVal) {
        scope.affect = newVal + 'some change';
      });
    }
  }
}

然后假设你有两个下降：

<select ng-model="ctrl.selection1"> .... </select>
<select ng-model="ctrl.selection2" react="ctrl.selection1" affect="ctrl.selection2>...</select>

编辑：

请记住，您可以将对象甚至函数传递到指令的隔离范围：

<select ng-model="ctrl.complexObject.selection1"> .... </select>
<input type="text" ng-model="ctrl.complexObject.textInput">
<select ng-model="ctrl.selection2" react="ctrl.complexObject" affect="ctrl.selection2" affect-function="ctrl.affect(obj)">...</select>

和指令

return {
    restrict: 'A',
    scope: {
      react: '=',
      affect: '=',
      affectFunction: '&'
    },
    link: function (scope, element, attrs) {
      scope.$watch('react', function(newVal) {
        if(scope.affectFunction) {
           scope.affect = scope.affectFunction({obj: newVal});
        }
        else { //default behaviour
           scope.affect = newVal.selection1 + newVal.textInput;
        }
      });
    }
相关文章：