1. 홈
  2. 질의 응답
  3. 추가 지침은 JS 각 코드의 컨트롤러 정의는 다음

추가 지침은 JS 각 코드의 컨트롤러 정의는 다음

2013-06-27 4 views
2

이추가 지침은 JS 각 코드의 컨트롤러 정의는 다음

<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="Scripts/angular.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="javascript"> 
     angular.module("demo", []).controller('DemoController', function ($scope) { 
      $scope.user = { 
       dateOfBirth: new Date(1970, 0, 1) 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div ng-app="demo" ng-controller="DemoController"> 
     Date Of Birth: 
     <my-datepicker type="text" ng-model="user.dateOfBirth" /> 
     <br /> 
     Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span> 
    </div> 
</body> 
</html>

그것은 내가 그것을에 지시문을 추가하는 순간을 좋아 하지마 작동, 그것은 오류를

Error: Argument 'DemoController' is not a function, got undefined
을 보여줍니다 HTML 코드 내 각 JS 응용 프로그램입니다 수 있습니다 다음

는

<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="Scripts/angular.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="javascript"> 
     angular.module("demo", []).controller('DemoController', function ($scope) { 
      $scope.user = { 
       dateOfBirth: new Date(1970, 0, 1) 
      } 
     }); 
     angular.module("demo", []).directive('myDatepicker', function ($parse) { 
      return { 
       restrict: "E", 
       replace: true, 
       transclude: false, 
       compile: function (element, attrs) { 
        var modelAccessor = $parse(attrs.ngModel); 

        var html = "<input type='text' id='" + attrs.id + "' >" + 
      "</input>"; 

        var newElem = $(html); 
        element.replaceWith(newElem); 

        return function (scope, element, attrs, controller) { 

         var processChange = function() { 
          var date = new Date(element.datepicker("getDate")); 

          scope.$apply(function (scope) { 
           // Change bound variable 
           modelAccessor.assign(scope, date); 
          }); 
         }; 

         element.datepicker({ 
          inline: true, 
          onClose: processChange, 
          onSelect: processChange 
         }); 

         scope.$watch(modelAccessor, function (val) { 
          var date = new Date(val); 
          element.datepicker("setDate", date); 
         }); 

        }; 

       } 
      }; 
     }); 
    </script> 
</head> 
<body> 
    <div ng-app="demo" ng-controller="DemoController"> 
     Date Of Birth: 
     <my-datepicker type="text" ng-model="user.dateOfBirth" /> 
     <br /> 
     Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span> 
    </div> 
</body> 
</html>

내가이 링크에서 자습서 다음있어 지시문을 전체 코드입니다 http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html

출처

2013-06-27 iJade

답변

6

demo 모듈을 두 번 정의하고 있습니다. 두 번째 인수를 angular.module method에 전달하여 새 모듈을 작성합니다. 당신은 또한 두 가지를 가지고, 그래서 controller 방법은 체인 수 있도록 모듈을 반환

// Create a module 
angular.module("demo", []).controller('DemoController', function ($scope) { 
    // ... 
}); 
// Get reference to module 
angular.module("demo").directive('myDatepicker', function ($parse) { 
    //   ^Only one argument 
});

주, 또한 분명히 모듈을 반환 module 방법 : 기존 모듈에 대한 참조를 반환하는 두 번째 인수를 전달하지 마십시오 다른 옵션 :

체인 : 모듈

angular.module("demo", []).controller('DemoController', function ($scope) { 
    // ... 
}).directive('myDatepicker', function ($parse) { 
    // ... 
});

저장 참조 :

var demo = angular.module("demo", []); 
demo.controller('DemoController', function ($scope) { 
    // ... 
}); 
demo.directive('myDatepicker', function ($parse) { 
    // ... 
});

출처

2013-06-27 08:27:40

+0

코드 수정 후 "TypeError : Object # 에 'datepicker'메서드가 없습니다" – iJade

+1

@iBlue - 날짜 선택 도구 플러그인에 문제가있는 것 같습니다. 적절한 스크립트를 포함하고 있습니까? (예를 들어 코드에 jQuery UI가 포함되어 있지 않습니다.) –

+0

어떤 자습서를 따르고 있습니까? 질문에 그것도 링크를 게시하십시오 ... – callmekatootie

관련 문제

 관련 문제