JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<b>Two uses of nttFormText</b>
<!--Always displays the last use for every use-->
<ntt-form-text text="Operations A" value="3"></ntt-form-text>
<ntt-form-text text="Operations B" value="3"></ntt-form-text>
<br>
<b>One use of nttFormTextThree</b>
<!--three will display here-->
<ntt-form-text-three text="Operations" value="5" obj="obj"></ntt-form-text-three>
<br>
<b>One to Three uses of nttFormTextTwo</b>
<!--spaces, underscores, dashes, ect cause display errors, tried both single and double quotes-->
<ntt-form-text-two text="Operations A" value="5"></ntt-form-text-two> <!-- displays {{text}} -->
<!--<ntt-form-text-two text="Description_2" value="5"></ntt-form-text-two>--> <!-- displays blank -->
<!--<ntt-form-text-two text="ASDF-2" value="5"></ntt-form-text-two>--> <!-- displays -2 -->
<br>
<b>One use of nttFormTextThree</b>
<!--three will fail to display here due to failure in two-->
<ntt-form-text-three text="description" value="6" obj="obj"></ntt-form-text-three>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.directive('nttFormText', [
function () {
return {
restrict: 'E',
//scope: false,
template: '<div>Text: {{text}}</div>',
link: function (scope, element, attrs) {
scope.text = attrs.text;
scope.value = attrs.value;
}
};
}])
myApp.directive('nttFormTextTwo', [
function () {
return {
restrict: 'E',
scope: { text: '=', value: '=' },
template: '<div>Text: {{text}}</div>'
};
}])
myApp.directive('nttFormTextThree', [
function () {
return {
restrict: 'E',
scope: { text: '=', value: '=', obj: '=' },
template: '<div>Text: {{text}} Value: {{value}} Spaced Word: {{obj.spacedWord}}</div>'
};
}])
myApp.controller('MyCtrl', function ($scope) {
$scope.obj = { spacedWord: "hello world!" };
});