Неисправность инициализации AngularJS Controller: невозможно установить свойство ... не определено

Я новичок в работе над небольшим проектом, который имеет несколько модулей, загружаемых на одну страницу по мере необходимости. В настоящее время я просто пытаюсь заставить приложение загрузить параметр с помощью модуля staffdetails.html и обновить его с помощью контроллера. В настоящее время он просто отображаетНеисправность инициализации AngularJS Controller: невозможно установить свойство ... не определено

Здравствуйте

Персонал Подробности ....

Таким образом, значение от контроллера не загружается. Я пробовал как в угловом 1.2, так и в 1.5.9 (думаю, последний стабильный), поскольку я знаю, что синтаксис, по-видимому, изменился.

Адрес index.html.

<!-- index.html --> 
<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <!-- SCROLLS --> 
    <!-- load bootstrap and fontawesome via CDN --> 
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" /> 

    <!-- SPELLS --> 
    <!-- load angular and angular route via CDN --> 
    <script src="lib/angular.min.js"></script> 
    <script src="lib/angular-ui-router.min.js"></script> 
    <script src="lib/jquery-2.1.1.min.js"></script>1 


    <script> 
     (function() { 
      angular.module("app", ["ui.router"]); 
     }()); 
    </script> 

    <!-- Services --> 
    <!--script src="app/service/informationStorage-Service.js"</script--> 

    <!-- Controllers --> 
    <script src="app/controller/additionalfeatures-controller.js"></script> 
    <script src="app/controller/outcome-controller.js"></script> 
    <script src="app/controller/staffdetails-controller.js"></script> 
    <script src="app/controller/training-controller.js"></script> 

    <script> 
    $(document).ready (
     function() { 
      var app = angular.module("app"); 
      console.log("Index1"); 
      app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) { 
       //$compileProvider.debugInfoEnabled(false); 
       $stateProvider.state(
        "staffdetails", { 
         url: "/staffdetails", 
         views: { 
          "": { 
           templateUrl: "template/staffdetails.html", 
           controller: "StaffDetailCtrl" 
          } 
         } 
        } 
       ); 
      console.log("Index2"); 
       $urlRouterProvider.otherwise(""); 
      } ]); 
     }()); 

    </script> 
</head> 
<body> 
Hello 
    <!-- MAIN CONTENT AND INJECTED VIEWS --> 
    <div id="main"> 
     <div ui-view ng-cloak></div> 
    </div> 
</body>

staffdetails-controller.js

(function() { 
"use strict"; 
var app = angular.module("app"); 

app.controller('StaffDetailCtrl', ['$scope', function($scope) { 

    console.log("StaffDetailCtrl"); 

    function saveDetails($scope) { 

     $scope.testing = ["This is Working"]; 
    }; 

    saveDetails(); 
}]); 

});

Наконец страница, которая вызывается как модуль

<div class="container"> 
    <p>Staff Details...</p> 
    <p> {{testing}} </p> 
</div>

источник

2016-12-02 theHussle

Вы не имеете нг-приложение и нг-контроллер в разметке. – randominstanceOfLivingThing

ng-app находится в теге html, это неправильное место? где должен быть вызван ng-контроллер? Извините, очень новый угловой :) – theHussle

' 1'. В конце нет необходимости. убери это. – randominstanceOfLivingThing

Проблема в том что вы не передавая $ рамки в вашу функцию saveDetails().

Я немного изменил ваш код, чтобы он работал здесь в фрагменте. Но главное изменение было строку:

saveDetails($scope);

Посмотреть рабочий фрагмент кода здесь:

<!-- index.html --> 
 
<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
    <!-- SCROLLS --> 
 
    <!-- load bootstrap and fontawesome via CDN --> 
 
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" /> 
 

 
    <!-- SPELLS --> 
 
    <!-- load angular and angular route via CDN --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
    <script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script> 
 

 

 

 
    <!-- Controllers --> 
 

 
    <script> 
 
     angular.module("app", ["ui.router"]); 
 
     var app = angular.module("app"); 
 

 
     app.controller('StaffDetailCtrl', ['$scope', function($scope) { 
 
      console.log("StaffDetailCtrl"); 
 
      function saveDetails($scope) { 
 
       $scope.testing = ["This is Working"]; 
 
      } 
 

 
      saveDetails($scope); 
 
     }]); 
 

 
     console.log("Index1"); 
 
     app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) { 
 
      //$compileProvider.debugInfoEnabled(false); 
 
      $stateProvider.state(
 
        "staffdetails", { 
 
         url: "/staffdetails", 
 
         views: { 
 
          "": { 
 
           template: '<div class="container">' + 
 
           '<p>Staff Details...</p>' + 
 
           '<p> {{testing}} </p>' + 
 
           '</div>', 
 
           controller: "StaffDetailCtrl" 
 
          } 
 
         } 
 
        } 
 
      ); 
 
      console.log("Index2"); 
 
      $urlRouterProvider.otherwise("/staffdetails"); 
 
     } ]); 
 

 
    </script> 
 
</head> 
 
<body> 
 
Hello 
 
<!-- MAIN CONTENT AND INJECTED VIEWS --> 
 
<div id="main"> 
 
    <div ui-view ng-cloak></div> 
 
</div> 
 
</body>

источник

2016-12-02 04:29:19 Toddsden

Неисправность инициализации AngularJS Controller: невозможно установить свойство ... не определено

ответ

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