0

Я новичок в угловых js, и я только начал изучать его. Я проходил учебники по w3schools, и я застрял в форме. Причина в том, ниже:Разделение модуля AngularJS не работает должным образом

код, указанный в руководстве, как показано ниже, и она отлично работает:

<div ng-app="" ng-controller="formController"> 
    <form novalidate> 
    First Name:<br> 
    <input type="text" ng-model="user.firstName"><br> 
    Last Name:<br> 
    <input type="text" ng-model="user.lastName"> 
    <br><br> 
    <button ng-click="reset()">RESET</button> 
    </form> 
    <p>form = {{user}}</p> 
    <p>master = {{master}}</p> 
</div> 

<script> 
function formController ($scope) { 
    $scope.master = {firstName: "John", lastName: "Doe"}; 
    $scope.reset = function() { 
     $scope.user = angular.copy($scope.master); 
    }; 
    $scope.reset(); 
}; 
</script> 

Но я пытаюсь это разделение модулей, как показано в одном из своих tutorail но Безразлично» т работы вообще. Ниже я попытался.

<!DOCTYPE html> 
    <head> 
     <title> 
      Angular JS 
     </title> 
    </head> 
    <script src="Scripts/angular.min.js"></script> 
    <body> 
    <div data-ng-app="myApp" data-ng-controller="formController"> 
     <form novalidate> 
      <table> 
       <tr> 
        <td> 
         First Name : 
        </td> 
        <td> 
         <input type="text" data-ng-model="user.firstName"> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Last Name : 
        </td> 
        <td> 
         <input type="text" data-ng-model="user.lastName"> 
        </td> 
       </tr> 
       <tr> 
        <button data-ng-click="reset()">Reset</button> 
       </tr> 

      </table> 
     </form> 
     <table> 
      <tr> 
      <td> 
       form = {{user}} 
      </td> 
      </tr> 

      <tr> 
      <td> 
       master= {{master}} 
      </tr> 
      </tr> 
     </table> 

    </div> 
    <script src="Scripts/myApp.js"></script> 
    <script src="Scripts/myCtrl.js"></script> 
    </body> 
</html> 

myCtrl.js содержит ниже код

app.controller("myCtrl",function($scope) 
     { 
     $scope.firstName = "John", 
    $scope.lastName = "Doe" 
    $scope.myVar = false; 
    $scope.toggle = function() { 
     $scope.myVar = !$scope.myVar; 
    }; 
     }); 

app.controller("formController",function($scope) 
{ 
    $scope.master = {firstName: "John", lastName: "Doe"}; 
    $scope.reset = function() { 
     $scope.user = angular.copy($scope.master); 
    }; 
    $scope.reset(); 
}); 

и myApp.js, как показано ниже:

var app=angular.module("myApp",[]); 

Но когда я пытаюсь код учебник дает мне ниже производство

форма = { "FirstName": "Джон", "LastName": "Doe"} мастер = { "FirstName": "Джон", "LastName": "Doe"}

и когда я бегу, что Я попытался это дает ниже выход

форму = {{пользователь}}
мастер = {{мастер}}

Почему это происходит так? Я также попытался сохранить ссылку angular.js наверху, но результат все тот же.

+0

это работает для меня, может быть, это из-за вашей угловой версии. Какую версию ты используешь? –

+0

Вы можете сообщить об ошибке в консоли? – squiroid

+0

@JohnyStark Я использую v1.2.26 –

ответ

2

Прежде всего, Добро пожаловать в сообщество разработчиков Angular!

Первый шаг: Не используйте IE для разработки. Попробуйте Chrome или Firefox.

Второй шаг: У вашего HTML и js мало ошибок. Например:

<table> 
     <tr> 
     <td> 
      form = {{user}} 
     </td> 
     </tr> 

     <tr> 
     <td> 
      master= {{master}} 
     </tr>   <--- need to be </td> 
     </tr> 
    </table> 

создать plunkr для вас, все маленькие ошибки исправляются (вы можете сравнить ваш код и мой, чтобы найти его). В Chrome все отлично работает. Я не могу проверить IE, потому что у меня его нет вообще.

Если вы все еще хотите использовать IE8, вы можете поймать ошибки как то:

<script type="text/javascript"> 
window.onerror = function(msg, url, line, col, error) { 
    // Note that col & error are new to the HTML 5 spec and may not be 
    // supported in every browser. It worked for me in Chrome. 
    var extra = !col ? '' : '\ncolumn: ' + col; 
    extra += !error ? '' : '\nerror: ' + error; 

    // You can view the information in an alert to see things working like   this: 
    alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra); 

    // TODO: Report this error via ajax so you can keep track 
    //  of what pages have JS issues 

    var suppressErrorAlert = true; 
    // If you return true, then error alerts (like in older versions of 
    // Internet Explorer) will be suppressed. 
    return suppressErrorAlert; 
}; 
</script> 

Но вы должны поместить этот код перед всеми другими скриптами в вашем HTML.

образец кода взят из that SO question

+0

Я не думаю, что есть какая-либо ошибка, потому что я добавил код, упомянутый вами, но не появилось никаких предупреждений. Я внес изменения, которые вы указали, но результат аналогичен IE. Протестировано в chrome и firefox и работает отлично. Поэтому я думаю, что проблема связана с версией IE. Спасибо за предложение. –

+0

@GuruprasadRao вы могли бы использовать угловую версию и версию IE? Это может помочь сообществу в случае, если вы столкнулись с несовместимостью. – floribon

+0

Несомненно. IE версия 8 и Angular JS Version 1.2.26 –

1

Если угловой, кажется, сломан, например, вы видите {{ curly brackets }} вместо любого рендеринга, скорее всего, это означает, что двигатель разбился.

Когда это произойдет, вам нужно найти, что было ошибкой. Они отображаются на консоли разработчика.

Вот как открыть его с помощью Google Chrome, а вот с помощью Firefox (или просто Google «консоли разработчика браузер» для любого другого браузера).

Затем вставьте здесь ошибку, чтобы мы могли помочь вам разобраться в этом и исправить.

+0

Я использую IE8 и не нахожу ошибок в консоли. Чисто. –

+0

Можете ли вы попытаться запустить ту же страницу в другом браузере, например Chrome, и сообщить нам, что вы видите? Я не знаком с консолью IE. Кроме того, если вы пишете 'console.log (угловой)' в такой консоли, вы видите, что угловой определяется? – floribon

+0

Хорошо. Я попробую использовать другие браузеры. –

Смежные вопросы