自定义指令中作用域对象内的嵌套对象

Nested object inside scope object in custom directive

本文关键字：对象 嵌套 作用域 指令 自定义      更新时间：2023-09-26

为什么我不能在我的范围对象的嵌套对象中有一个绑定，如下所示：

app.directive('myDirective', function() {
    return {
        scope: {
            dropdown: {
                option: '=selectedOption' //not working
            } 
        }
    }
})

我收到一个错误：

a.匹配不是一个函数

这是一个工作笨蛋。

"为什么"的答案是"因为这不是它的工作原理"。

解析指令范围的 AngularJS 源代码在这里： https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L829

  function parseIsolateBindings(scope, directiveName, isController) {
    var LOCAL_REGEXP = /^'s*([@&]|=('*?))('??)'s*('w*)'s*$/;
    var bindings = {};
    forEach(scope, function(definition, scopeName) {
      var match = definition.match(LOCAL_REGEXP);
      if (!match) {
        throw $compileMinErr('iscp',
            "Invalid {3} for directive '{0}'." +
            " Definition: {... {1}: '{2}' ...}",
            directiveName, scopeName, definition,
            (isController ? "controller bindings definition" :
            "isolate scope definition"));
      }
      bindings[scopeName] = {
        mode: match[1][0],
        collection: match[2] === '*',
        optional: match[3] === '?',
        attrName: match[4] || scopeName
      };
    });
    return bindings;
  }

如您所见，它对scope对象属性进行单次传递，并且不会递归下降到对象属性。

不确定这是否有效：

scope: {
    "dropdown.option": "=selectedOption"
}

但是，作为一种解决方法，您可以这样写：

app.directive('myDirective', function() {
    return {
        scope: {
            dropdownOption: "=selectedOption"
        },
        controller: ["$scope", function($scope) {
            $scope.dropdown = $scope.dropdown || {};
            $scope.$watch('dropdownOption', function(newValue) {
                $scope.dropdown.option = newValue;
            });

            $scope.$watch('dropdown.option', function(newValue) {
                $scope.dropdownOption = newValue;
            });
        }]
    }
})
相关文章：