Databinding к контроллеру внутри директивы в угловом

Question

Я новичок в угловой и имею следующую директиву:

angular.module('myApp') 
    .directive('myDirective', function() { 
    return { 
     templateUrl: '/views/partial-views/partial.html', 
     restrict: 'E', 
     controller : function(){ 
     age : '5' 
     }, 
     controllerAs : 'myCtrl' 
    }; 
    }); 

Я хочу, чтобы включить возраст на моей странице внутри partial.html, которая выглядит следующим образом:

<div ng-app="myApp" ng-controller="myCtrl as s"> 
    {{s.age}} 
</div> 

Однако я получаю следующее сообщение об ошибке:

Error: [ng:areq] Argument 'myCtrl' is not a function, got Object 

Может кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Были с вами две проблемы с кодом. Во-первых, вы не должны повторно использовать контроллер, используя ng-controller в своем шаблоне, поэтому его нужно удалить.

Во-вторых, контроллер является функцией не объекта, поэтому используйте:

this.age = '5';

Answer 2

Что упомянуто Chandermani является абсолютно правильным. Чтобы быть более уточнено, она может быть записана в виде,

Директива Определение

angular.module('myApp') 
    .directive('myDirective', function() { 
     return { 
      templateUrl: '/views/partial-views/partial.html', 
      restrict: 'E', 
      controller: ['$scope', function($scope){ 
       $scope.age = '5' 
      }] 
    }; 
}) 

Использование

<div ng-app="myApp"> 
    <my-directive> 
    {{age}} 
    </my-directive> 
</div> 

Однако, нет никакого смысла определения директивы здесь. Вы можете просто использовать определение контроллера для выполнения одного и того же действия.