2015-02-14 4 views
0

У меня есть простое текстовое поле и кнопка, и всякий раз, когда пользователь нажимает кнопку, предупреждение показывает текст текстового поля, но я хочу сделать это таким образом (я знаю, что есть намного лучшие способы, но Сначала я хочу понять, почему этот способ не работает):Невозможно правильно присвоить область видимости

var app = angular.module('app', []); 
app.factory('Service', function() { 
    var service = { 
      add: add 
     }; 
     return service; 
     function add($scope) { 
      alert($scope.user.username); 
     } 
}); 
app.controller('table', function(Service,$scope) { 
    //get the return data from getData funtion in factory 
    this.add = Service.add($scope); 

}); 

Как вы можете видеть, что я отправить сферу на завод, и я определить user.username следующим образом:

<button class="btn btn-primary" ng-click="t.add(user.userName)"> 

Но когда я запустить это ничего не может кто-нибудь сказать мне, что не так с этим кодом?

<body ng-app="app"> 
<form> 
    <div class="row commonRow" ng-controller="table as t"> 
     <div class="col-xs-1 text-right">item:</div> 
     <div class="col-lg-6 text-right"> 
      <input id="txt" type="text" style="width: 100%;" 
       ng-model="user.userName"> 
     </div> 

     <div class="col-xs-2"> 
      <button class="btn btn-primary" ng-click="t.add(user.userName)"> 
       click me</button> 
     </div> 
    </div> 
</form> 

также ссылка plnk выглядит следующим образом:

plnkr

+0

вы смешиваете проблемы здесь; вы пытаетесь передать переменную в службу через '$ scope', но вы пытаетесь вызвать эту услугу с помощью альтернативного синтаксиса Controller As. Если вы проверите свой код, вы увидите, что 'user.userName' не определено, потому что' user' не существует в '$ scope'. как только это будет разрешено, вы также увидите, что ваша функция не срабатывает. – Claies

+0

Поблагодарите u @Claies, можете ли вы лидировать plnkr рабочей версии этого кода? –

+0

@Claies также в этой строке Я различаю переменную в области: \t

ответ

1

Проблема заключается в этой строке

this.add = Service.add($scope); 

Здесь вы присваиваете значение возвращается (который undefined) от Service.add($scope) вызова к this.add.

Правильный подход будет либо

this.add = function(data) { Service.add($scope); } 

или

this.add = Service.add; 

// in the service factory. 
function add(usrNm) { 
    alert(usrNm); 
} 
+0

Спасибо, пожалуйста, посмотрите, я сделал то, что вы но все та же проблема: http://plnkr.co/edit/abZhudS7VXIIHsWQGAQD?p=preview –

+1

@HamedMinaee, в этом коде плунжера это должно быть 'alert (usrNm.user.userName);' –

+0

Спасибо, что вы просто из Любопытство Я попробовал это вместо первого: this.add = Service.add, но кажется, что он не работает, что не так: http://plnkr.co/edit/abZhudS7VXIIHsWQGAQD?p=preview –

0

Первое, что вы не можете использовать $ объем в Service.and в контроллере вы не assaining это (объект) в область $ scope.so $ не содержит никакого значения. Я полагаю, вы должны написать вот так: $ scope.user = this;

+0

Вы можете предоставить ссылку на скрипку или plnkr? –

+0

Можете ли вы рассказать мне о своем требовании –

+0

Я хочу сделать ссылку выше, что я предоставил работу, но таким образом, что это так, я хочу понять, почему она не работает ... –

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