I'm creating a directive which generates some markup based on a property of an associated field. I plan on using it like this:
<mvc-error-list field="myForm.testField"></mvc-error-list>
Within the directive I want to look up a property of the myForm.testField object. But I'm unclear on how to retrieve the myForm.testField object based on the string value being passed in to the template function.
If you want to share an object between your controller and your directive you can use an isolate directive scope and two-way bind a property on your directive's scope to one on your controller's scope.
angular.module('testApp', [])
.directive('myDirective', function(){
return {
restrict: 'E',
scope: {
field: '='
},
link: function(scope){
console.log(scope.field.message)
}
};
})
.controller('myCtrl', function($scope){
$scope.ctrlField = { message: 'Hello, World' };
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='testApp' ng-controller='myCtrl'>
<my-directive field='ctrlField'></my-directive>
</div>Alternatively, if you don't need to pass anything back to your controller you can use a one-way binding. Which works the same way, but you use the & symbol instead of = when defining your isolate scope. You also need to access the property as a function, as a one-way databind creates a "getter function" on your directive's scope.
