动态更改 angular 指令中的模板

Question

我有一个控制器，它有一些变量：

.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() {}
})

这只是控制器功能的一小部分。 $scope.props - 是来自 json 数据的模型。
此外，还有一个指令应该采用控制器选择的提供者并更改模板，并尽可能将所有 $scope.props 绑定到更新的模板。
我错误地尝试创建指令：

.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)


            })
        }
    }
}]))

还有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>

模板应该从 'DataProvider' 控制器中获取 ng-models。我知道 Whosebug 上有几个类似的问题，但没有一个能帮助我....

https://jsfiddle.net/0jLt0u0L/2/ 有例子，但我不知道如何在那里创建模板....在模板中，例如，显示来自控制器的选定提供者。

Answer 1

这里是对你的 fiddle 的修改，以使其在某种程度上起作用：https://jsfiddle.net/masa671/77z165uj/

关键修改：

将 angular.min.js 移到顶部。
将 ng-app 移动到正文以使模板生效（参见 HTML 齿轮）。
通过 <script> 标签定义模板。

我没有通过 $http 加载模板（我不确定是否可以使用 jsfiddle），但只是将它们定义到位。例如：

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

一旦你开始工作，就更容易解决如何使用 $http 动态加载它们的问题。

动态更改 angular 指令中的模板

Change template in angular directive dynamically

javascript

templates

angularjs

angularjs-directive

angular-ngmodel