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>

模板应该采用来自＆＃39; DataProvider＆＃39;的模型。控制器。我知道StackOverflow上有几个类似的问题，但没有一个能帮助我......

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

Answer 1

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

主要修改：

将angular.min.js移到顶部。
将formulaInl移至正文以使模板生效（请参阅HTML设备）。
通过ng-app标记定义模板。

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

$http

一旦您开始工作，就可以更轻松地解决问题，如何使用<script type="text/ng-template" id="jsonProvider.html"> <div>I am a jsonProvider.</div> </script>动态加载它们，如果需要的话。

动态更改角度指令中的模板

1 个答案: