Angularjs - значение масштаба не применяется в шаблоне

Question

Я использовал область действия директивы в шаблоне директивы. Я попытался получить html из кэша шаблонов, который был сохранен ранее.

Но текущая область действия директивы не применяется к директиве. Я не буду причиной.

Я попытался скомпилировать шаблон и получить значение. Но не применяется.

contentString = $templateCache.get('template/MyTemplate') 

var div = document.createElement("div"); 
div = angular.element(div).html(contentString); 
var s = $compile(div.contents())($scope); 

шаблон/MyTemplate будет следующий

<div> 
    {{obj.value}} 
</div> 

Directive сферы, как следующие,

link: function ($scope, $element, $attributes) { 
    $scope.obj.value="This is my test" 
} 

Я получил выход как

<div class="ng-scope"> 
    {{obj.value}} 
</div> 

Что будет вопрос?

Answer 1

Проверьте этот пример, который использует настраиваемую директиву с изолированной областью. Я надеюсь, что приведенные ниже примеры помогут вам.

angular 
 
    .module('demo', []) 
 
    .directive('hello', hello); 
 
    
 
    hello.$inject = ['$templateCache', '$compile']; 
 
    
 
    function hello($templateCache, $compile) { 
 
    var directive = { 
 
     scope: { 
 
     }, 
 
     link: linkFunc 
 
    }; 
 
    
 
    return directive; 
 
    
 
    function linkFunc(scope, element, attrs, ngModelCtrl) { 
 
     scope.obj = { 
 
     value: 'Hello, World!' 
 
     }; 
 
     
 
     var template = $templateCache.get('templateId.html'); 
 
     element.html(template); 
 
     $compile(element.contents())(scope); 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <hello></hello> 
 
    <script type="text/ng-template" id="templateId.html"> 
 
    <div> 
 
     {{obj.value}} 
 
    </div> 
 
    </script> 
 
</div>

Другой пример использования контроллера сглаживания синтаксиса т.е. controller as с директивой, чтобы быть совместимыми с использованием controller as с представлением и контроллером спариваний

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController) 
 
    .directive('hello', hello); 
 
    
 
    function DefaultController() { 
 
    var vm = this; 
 
    vm.message = 'Hello, World!'; 
 
    } 
 
    
 
    hello.$inject = ['$templateCache', '$compile']; 
 
    
 
    function hello($templateCache, $compile) { 
 
    var directive = { 
 
     link: linkFunc, 
 
     scope: { 
 
     message: '=' 
 
     }, 
 
     controller: HelloController, 
 
     controllerAs: 'vm', 
 
     bindToController: true 
 
    }; 
 
    
 
    return directive; 
 
    
 
    function linkFunc(scope, element, attrs, ngModelCtrl) { 
 
     var template = $templateCache.get('templateId.html'); 
 
     element.html(template); 
 
     $compile(element.contents())(scope); 
 
    } 
 
    } 
 
    
 
    function HelloController() { 
 
    var vm = this; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as ctrl"> 
 
    <hello message="ctrl.message"></hello> 
 
    <script type="text/ng-template" id="templateId.html"> 
 
    \t <p>{{vm.message}}</p> 
 
    \t </script> 
 
    </div> 
 
</div>