2

Добрый день. Ситуация такая. Нужно вместо mainform.innerHtml = '<p>sala</p>'ставить шаблонmainform.innerHtml='template.html' где внутри template.html написан тот же '<p>sala</p>' ??

  var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
    $scope.myfunction = function () {
        var text_1 = document.getElementById('text_1').value;
        var mainform = document.getElementById('mainform');
        if (text_1 == 's') {
            mainform.innerHTML = '<p>sala</p>'
        }
        else {
            alert("error");
        }
    }
});

2 ответа 2

2

Вопрос задан конечно сумбурно.

Весь шаблонный HTML, который Вы хотите вынести в отдельные файлы, следует делать внутри директив.

Именно для этого они существует в Angular, собственно в директивах заключена главная сила Angular.

JS

app.directive('directiveName', function() {
    return {
        restrict: 'AE',
        scope: false,
        link: function (scope, element, attrs) {
            // переменная из общего/родительского скопа Вашего контроллера
            scope.mainform = 'someVariable';
        },
        templateUrl: function(scope, element, attrs) {
            // задаем шаблон по условию
            // это правильно и удобнее делать здесь (например если нужно будет задавать шаблон динамически)
            if (scope.text_1 == 's') {
                return 'pages/1.html'
            } else if (scope.text_1 == 'ss') {
                return 'pages/2.html'
            }
        }
    }
});

template.html

<div class="someClass">
    <span class="anotherClass">
        {{mainform}} <!-- переменная из контроллера -->
        <!-- 
            внутри шаблона директивы можете использовать 
            любые переменные из родительского скопа контроллера 
        -->
    </span>
</div>

HTML

<directiveName class="someClass" id="someId">
        <!-- внутри директивы будет отрендерен template.html -->
</directiveName>
3
  • Я хотел сделать по другому, у меня один button где после проверки должен показывать определенный шаблон. Код щас ставлю 10 июл 2015 в 14:49
  • var myApp = angular.module('myApp', []); myApp.controller('myCtrl', function ($scope) { $scope.changeTemplate = function () { var text_1 = document.getElementById('text_1').value; if (text_1 == 's') { $scope.template = 'pages/1.html'; } else if(text_1=='ss'){ $scope.template = 'pages/2.html'; } } }); 10 июл 2015 в 14:49
  • @MuhammadYakubov, взгляните на обновленный ответ. В директиве можно задать шаблон по условию, если это необходимо. Используя директивы, Вы получаете возможность более гибко писать, а это может в дальнейшем понадобится. Нужно привыкать к использованию директив. Это правильный, так называемый, angular-way кодинг)
    – Alliswell
    11 июл 2015 в 3:20
1
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
    $scope.changeTemplate = function () {
        var text_1 = document.getElementById('text_1').value;
        if (text_1 == 's') {
            $scope.template = 'pages/1.html';
        }
        else if(text_1=='ss'){
            $scope.template = 'pages/2.html';
        }
    }
});

а в html

<div data-ng-include="template"></div>
4
  • <div data-ng-include="template"></div> 10 июл 2015 в 14:50
  • Все это создал не используя директиву) 10 июл 2015 в 14:51
  • 1
    пожалуйста взгляните на обновленный ответ.
    – Alliswell
    11 июл 2015 в 3:25
  • Да, точно. Проверил с директивами удобнее работать. Спасибо 11 июл 2015 в 12:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.