1

うーん、コントローラーがディレクティブと通信できないAngularバインド（しゃれは意図されていません）の1つで立ち往生しています。

私のディレクティブは次のとおりです。テンプレートを使用した選択ドロップダウンです。

app.directive('month', function() {
  return {
    replace:true,
    scope:{
     months:"=",
     monthChoice:"="
   },
    template:'<select ng-model="monthChoice" ng-options=\"currMonth for currMonth in months\" class=\"monthsClass\"></select>',
    link: function (scope, element, attrs) {

      var lastEntry = scope.months.length - 1;
      scope.monthChoice = scope.months[lastEntry];

      scope.$watch('monthChoice', function() {
        console.log(scope.monthChoice);
      });
    }
  }
})

選択に入力するmonths値は、コントローラーと通信するサービスから取得されます。

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

    $scope.months = Months.init();

    $scope.$watch('monthChoice', function() {
        console.log($scope.monthChoice);
      });

    $scope.whichMonth = function(m) {
      console.log(m);
      console.log($scope.month);
      return true
    }

  }]);

私ができるようにしたいのはmonthChoice、変更が発生したときにモデルの値をコントローラーに渡すことです。そうすれば、部分ビューの他の html 要素からアクセスできます。私の部分的なビューは次のように設定されています。

<month months="months" ng-change="whichMonth(monthChoice)"></month><br>

これは、典型的な $routeProvider を使用してルーティングされるパーシャル内にあります。

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/cand-list.html',
        controller: 'CandListCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

次のエラーをスローしています。Expression 'undefined' used with directive 'month' is non-assignable!

また、コントローラーから値にアクセスできません。

4

2 に答える 2

1

ディレクティブ と の両方を使用して、ngModelを介して通信するだけngModel.NgModelControllerです。例えば...

app.directive('month', function() {
  return {
    restrict: 'E',
    replace: true,
    require: 'ngModel',
    scope: {
      months: '='
    },
    template: '<select class="monthsClass" ng-options="month for month in months"></select>',
    link: function(scope, element, attr, modelController) {
      modelController.$setViewValue(scope.months[scope.months.length - 1]);
      modelController.$render();
    }
  }
});

と

<month ng-model="month" months="months"></month>

Plunker

于 2015-02-22T23:37:33.730 に答える