[英]Change template in angular directive dynamically
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. $scope.props
是json数据的模型。
Also, there is directive that should take controller's selected provider and change template, and as possible bind all $scope.props
to updated template. 另外,有
$scope.props
指令应采用控制器的选定提供程序并更改模板,并尽可能将所有$scope.props
绑定到更新的模板。
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: 并且有html代码:
<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. 模板应采用“ DataProvider”控制器中的ng-models。 I know on StackOverflow was several similar questions, but no one of them helps me....
我知道在StackOverflow上有几个类似的问题,但是没有人帮助我...。
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. https://jsfiddle.net/0jLt0u0L/2/有示例,但是我不知道如何在其中创建模板。...例如,在模板中,显示从控制器中选择的提供程序。
Here is a modification of your fiddle to make it work to some extent: https://jsfiddle.net/masa671/77z165uj/ 这是对您的提琴的一种修改,可以使其在某种程度上起作用: https : //jsfiddle.net/masa671/77z165uj/
The key modifications: 关键修改:
ng-app
to body to make the templates effective (see HTML gear). ng-app
移至正文以使模板生效(请参见HTML齿轮)。 <script>
tags. <script>
标记定义模板。 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. 我没有通过
$http
加载模板(我不确定jsfiddle是否有可能),而是在适当的位置定义了它们。 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. 一旦开始工作,就很容易解决如何使用
$http
动态加载它们(如果需要)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.