One of the controllers I created 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() {}
})
This is just a small part of the controller's functions. The $scope.props is a model from JSON data.
There is also a directive that is supposed to take the controller's selected provider and change the template, while also possibly binding all $scope.props to the updated template.
Here is my failed attempt at creating the 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)
})
}
}
}]))
Here is the 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>Choose 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>
The template should take ng-models from the 'DataProvider' controller. I have seen similar questions on StackOverflow, but none of the solutions worked for me...
https://jsfiddle.net/0jLt0u0L/2/ provides an example, but I am unsure how to create a template there. In the template, I want to display the selected provider from the controller.