JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<div ng-app="myApp">

    <div ng-controller="myCtrl">
        
        <div ng-repeat="object in data track by $index">
            <drct1 ng-show="object.val === 'obj1'" object="object">
            </drct1>
            <drct2 ng-show="object.val === 'obj2'" object="object">
            </drct2>
        </div>
        
    </div>

</div>

JavaScript

//The point of this demonstration is dependent types on directives.
//I have an array of objects of various types, but if I do an ng-repeat on them,
//I want the type of the directive to depend on the type of the object it has repeated.
//The problem is, it will still compile/link the directive, since ng-hide appears to only hide
//in the css sense.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope){
    
    $scope.data = [{'val':'obj1', 'oneProperty':3},
                  {'val':'obj2', 'totallyDifferentProperty':true}]
    
}])
.directive('drct1', [function(){
    //This is the directive that will link to the first object.
    //This won't kill my program since referencing the hidded property here is fine.
    return {
        restrict : 'E',
        scope : {
            obj : "=object",
        },
        transclude : true,
        template : "<foo ng-transclude></foo>",
        link : function(scope){
            scope.additive = scope.obj['oneProperty'] + 5;
            console.log(scope.additive);
            //Some other stuff...
        }
    };
    
}])
.directive('drct2', [function(){
    //This is the directive that will link to the second object since it doesn't have the hidden property.
    return {
        restrict : 'E',
        scope : {
            obj : "=object",
        },
        transclude : true,
        template : "<foo ng-transclude></foo>",
        link : function(scope){
            scope.complainer = scope.obj.totallyDifferentProperty;
            console.log(scope.complainer);
        }
    };
    
}])