After defining a custom directive in a controller and setting some variables within the controller's $scope, I encountered an issue.
myapp.controller('demoController', function ($scope) {
$scope.userInput = "Hello World";
});
myapp.directive('custom', function () {
return {
template: '<input type="text" ng-model="userInput" value="{{userInput}}" />'
}
});
Within the HTML:
<div controller="demoController">
<custom></custom>
I expected the 'custom' directive to inherit the parent controller's scope and have access to the 'userInput' variable. However, upon rendering the page, nothing happened as the input element displayed nothing.
This left me pondering whether the custom directive should indeed inherit the parent's scope. How can I correct this situation?