Question

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

这是给我带来麻烦的指令。我在$scope.$watch上设置了ctrl.selection，但它不会触发（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>

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

Answer 1

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

然后，您只需要一个指令：

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

使用指令附加具有对html元素的范围访问权限的要素

1 个答案:

编辑：