Вложенный объект внутри объекта области видимости в пользовательской директиве

Question

Почему я не могу имею обязательную силу в вложенном объекте в моем объекте области видимости, как это:

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

я получаю сообщение об ошибке:

a.match is not a function

Вот working plunker.

Answer 1

Ответ на «почему» это «потому что это не то, как это работает».

Исходный код 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 объекта и не рекурсивно спускаться в свойство объекта.

Answer 2

не уверен, если это будет работать или нет:

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