更改角指令模板動態

我有一個控制器，它有一些變量：更改角指令模板動態

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

模板應採取NG-模式從 'DataProvider的' 控制器。我知道StackOverflow上是幾個類似的問題，但沒有他們中的一個可以幫助我....

https://jsfiddle.net/0jLt0u0L/2/ 有例子，但我不知道如何創建有模板....在模板中，例如，從控制器顯示選定的提供者。

來源

2016-11-12 Triple -B

問題解釋不是很清楚。建議您創建一個演示，重現問題以及更好地解釋它 – charlietfl

我添加jsfiddle。 –

另外，當我在frifox或chrome中使用它時，它們會將錯誤提示錯誤：c爲空 .replaceWith/<@http：//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min .js：194：282 q @ http：//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js：7：353 .replaceWith @ http：//ajax.googleapis。 com/ajax/libs/angularjs/1.5.5/angular.min.js：194：257 U.prototype [b] @http：//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular .min.js：197：332 loader/promise <@file：/// H：/mapConfig_Angular/andular.components.js：38：25 e/<@http：//ajax.googleapis.com/ajax/庫/ angularjs/1.5.5/angular.min.js：130：226 –

這是你的提琴的修改，使其工作在一定程度上：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動態加載它們，如果是所需要的。

來源

2016-11-12 17:59:42 masa

更改角指令模板動態

回答

相關問題