Change template in angular directive dynamically

Question

I have a controller, that has some variables:

.controller('DataProvider', function($scope, $timeout, $mdSidenav, $mdDialog, $mdMedia, $mdToast, selectedData) {
    $scope.provider;
    $scope.providers = [{
        name: 'jsonProvider',
        displayNmae: "jsonProvider"
    }, {
        name: 'imageProvider',
        displayNmae: "imageProvider"
    }];
    $scope.props = {
        id:_guid(),
        provider:''
    }
    this.providerWasChange = function() {}
})

It is just little part of controller functions. $scope.props - is model from json data.
Also, there is directive that should take controller's selected provider and change template, and as possible bind all $scope.props to updated template.
There is my wrong attempt of creating directive:

.directive('provider', function([$compile, $templateCache, function($compile, $templateCache) {
    var getTemplate = function(data) {
        function templateId() {
            switch (data.name) {
                case 'jsonProvider':
                    return 'jsonProvider-template.html';
                case 'imageProvider':
                    return 'imageProvider-template.html';
            }
        }

        var template = $templateCache.get(templateId(data));
        return template;
    }

    return {
        templateUrl: '',
        transclude: true,
        scope: {
            provider: '@'
        },
        replace: true,
        restrict: 'E',
        require: '?NgModel',
        link: function(scope, element) {
            var template = getTemplate(scope.$parent.provider)
            element.html(template)
            $compile(element.contents())(scope)

            scope.$parent.$watch(function() {
                return scope.$parent.provider;
            }, function(newVal, oldVal, scope) {
                console.log(newVal)

                var template = getTemplate(scope.$parent.provider)
                element.html(template)
                $compile(element.contents())(scope)


            })
        }
    }
}]))

And there is html code:

<md-tab id='layerProviderWrapper'>
                            <md-tab-label>Provider data</md-tab-label>
                            <md-tab-body>
                                <div layout="column" ng-controller="layerProvider">
                                    <md-input-container style="width:90%">
                                        <label>Chose provider data</label>
                                        <md-select ng-model="provider" ng-change="providerWasChange()">
                                            <md-option><em>None</em></md-option>
                                            <md-option ng-repeat="provider in providers" ng-value="provider">
                                                {{provider.displayNmae}}
                                            </md-option>
                                        </md-select>
                                    </md-input-container>

              problems starts here:  <provider> </provider>

                                </div>
                            </md-tab-body>
                        </md-tab>

template should take ng-models from 'DataProvider' controller. I know on StackOverflow was several similar questions, but no one of them helps me....

https://jsfiddle.net/0jLt0u0L/2/ There is example, but I don't know how to create template there.... In template, for example, show selected provider from controller.

Answer 1

Here is a modification of your fiddle to make it work to some extent: https://jsfiddle.net/masa671/77z165uj/

The key modifications:

• Move angular.min.js on top.
• Move ng-app to body to make the templates effective (see HTML gear).
• Define the templates via <script> tags.

I did not load the templates via $http (I am not sure if it is even possible with jsfiddle), but just defined them in place. For example:

<script type="text/ng-template" id="jsonProvider.html">
  <div>I am a jsonProvider.</div>
</script>

Once you get this working, it is easier to resolve, how to load them dynamically with $http , if that is what is needed.