2014-03-13 2 views
0

Я начинаю использовать angularjs, и у меня есть проблема, может быть, потому, что я злоупотребляю им. У меня есть представление, связанное с массивом объектов; Я хочу определить свойства и методы этих объектов в viewModel, используя функцию конструктора для свойства и методы добавления к прототипу. Вот Javascript ViewModel:Binding throw angularjs для прототипов методов

var CDLViewModel = function(name, operator, state) { 
    this.Name = name; 
    this.Operator = operator; 
    this.State = state; 
    this.LockEnabled = false; // some logic based on the state here 
}; 

CDLViewModel.prototype = {  
    StartEnabled: function() { 
     return false; // some logic based on the state here 
    } 
}; 

В этом ViewModel у меня есть два метода, которые управляют, если некоторые кнопки включены: один определяется в конструкторе, а другой в прототипе. Я хочу определить все методы только в прототипе, но угловые, похоже, не видят здесь методов. В моем контроллере я загружаю некоторые данные с сервера, а затем заполняю массив viewModels; если я отлаживать массив я могу видеть объекты с помощью метода StartEnabled в прототипе:

function myController($scope, $http, $rootScope) { 
    if (!$rootScope.cdls) { 
     $rootScope.cdls = []; 
     $http.get("http://localhost:8080/...") 
      .then(function(result) { 
       for (var i = 0; i < result.data.length; i++) { 
        $rootScope.cdls[i] = new CDLViewModel(result.data[i].Name, result.data[i].Operator, result.data[i].State); 
       } 
      }, 
       function() { 
        alert("ko"); 
       }); 
    } 
}; 

В представлении у меня есть этот код, перебираем массив и связать некоторый входной сигнал и состояние кнопки для каждого ViewModel ; по какой-то причине кнопка, привязанная к методу LockEnabled, работает, а кнопка, привязанная к методу StartEnabled, всегда отключена. Вот выдержка из обзора:

<tabset> 
    <tab data-ng-repeat="cdl in cdls" heading="{{cdl.Name}}" > 

    Operator: <input type="text" data-ng-model="cdl.Operator"/> 

     <a class="btn btn-primary btn-lg btn-block" href="#/start" data-ng-disabled="cdl.StartEnabled" >Start</a> 

     <a class="btn btn-primary btn-lg btn-block" href="#/lock" data-ng-disabled="cdl.LockEnabled">Lock</a> 

Вторая кнопка (ссылка) работает, первый из них нет.

+2

Я думаю, что это 'data-ng-disabled =" cdl.StartEnabled "должно быть' data-ng-disabled = "cdl.StartEnabled()" 'в обоих местах. – Chandermani

+0

Спасибо, ты прав. Я предполагал это, и я пытался, но в то время у меня была другая проблема, и в правде я пробовал только версию без круглых скобок! Теперь он работает! –

ответ

0

Я думаю, что это data-ng-disabled="cdl.StartEnabled" должно быть data-ng-disabled="cdl.StartEnabled()" в обоих местах.

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