Currently, I am developing a web application that dynamically displays specific prompts based on the field in focus. There are several different texts stored as scripts that I want to showcase at these different points.
My goal is to incorporate scope data within these strings when they appear. Currently, everything appears as plain text. Here's what I'm currently implementing in the view (Note: I will refactor ng-init to a controller later on).
<div><p>Full Name</p><input placeholder="Name" name="personal.name" ng-model="personal.name" ng-model-options="{ updateOn: 'default blur' }" class="medium" type="text"/></div>
<div><p>Address</p><input class="long" type="text" ng-model="personal.address" ng-model-options="{ updateOn: 'default blur' }" placeholder="Address"/></div>
<div><p>Phone</p><input placeholder="Phone" ng-model="personal.phone" type="phone" ng-model-options="{ updateOn: 'default blur' }" only-digits/></div>
<div ng-init="script()">
<div ng-repeat="scripts in script">
<div ng-show="{{scripts.element}}" ng-hide="true" class="alert-bar">
<div class="wrapper">
<div ng-bind="scripts.script"></div>
</div>
</div>
</div>
</div>
Additionally, let's take a look at the controller code below (disregard any dummy data mentioned as I will handle this later):
$scope.script = function(){
$scope.script = [
{
'element': "personal.name",
'script': '{{personal.name}} welcome to SOCU\'s loan application.'
},
{
'element': "personal.address",
'script': '{{personal.name}}, please enter your full current address.'
},
{
'element': "personal.phone",
'script': '{{personal.name}}, please enter your current phone number, with the area code.'
}
];
}
Everything seems to be functioning smoothly except for the part where the name doesn't show up. I understand that using double curly brackets here is not the right approach. I have also attempted to fetch the data directly from the $scope object, but unfortunately, I couldn't locate any personal data there.