Why can't I have a binding in a nested object in my scope object like this:
app.directive('myDirective', function() {
return {
scope: {
dropdown: {
option: '=selectedOption' //not working
}
}
}
})
I am getting an error:
a.match is not a function
Here's a working plunker.
The answer to "why" is "because that isn't how it works".
The AngularJS source code that parses the scope for a directive is here: 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;
}
As you can see, it does a single pass through the scope object properties and does not recursively descend into object properties.
Not sure if this will work or not:
scope: {
"dropdown.option": "=selectedOption"
}
But, as a workaround, you can write like this:
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;
});
}]
}
})
scope: { "dropdown.option": "=selectedOption" }?