AngularJs: привязка свойства объекта области к директиве

Question

Я немного новичок в AngularJs, так что простите меня, если это вопрос newb, но я немного оглянулся и не смог понять это вне.

Я пытаюсь отправить атрибут объекта в директиву, и я не совсем уверен, почему это не работает.

Я получил переменную области видимости, что это объект, что-то вроде:

$scope.player = {name:"", hitpoints:10}; 

В моем HTML, я пытаюсь связать, что директивы:

<span accelerate target="player.hitpoints" increment="-1">Take Damage</span> 

В моей директиве Я пытаюсь изменить player.hitpoints так:

scope[attrs.target] += attrs.increment; 

Когда я проследить его, сфера [attrs.target] не определено, даже если attrs.target является «player.hitpoints». Когда я использую target = "player", это прослеживается просто отлично, но я не хочу, чтобы явно манипулировать свойством .hitpoints в директиве.

Edit: Я сделал jsfiddle, чтобы проиллюстрировать то, что я пытаюсь сделать: http://jsfiddle.net/csafo41x/

Answer 1

Существует способ разделить объем между вашим контроллером и директивы. Вот очень хороший пост Дэн Wahlin на обмен в директиве рамки - http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

Есть 3 способа сделать так

• @ Используется для передачи значения строки в директиве
• = Используется для создания двусторонняя привязка к объекту, который передается в директиве
• & Позволяет внешняя функция будет принят в директиве и вызывается

Просто очень простой пример того, как упоминалось выше, сфера применения должны быть использованы

angular.module('directivesModule').directive('myIsolatedScopeWithModel', function() { 
    return { 
     scope: { 
      customer: '=' //Two-way data binding 
     }, 
     template: '<ul><li ng-repeat="prop in customer">{{ prop }}</li></ul>' 
    }; 
}); 

Answer 2

Там целый ряд вещей происходит здесь:

# 1 - объем

После того, как вы определяете ваш выделенный объем (в соответствии с ответом @ Yasser), тогда вам не нужно иметь дело с attrs - просто используйте scope.target.

# 2 - шаблон

Что-то на самом деле нужно обрабатывать событие щелчка. В вашей скрипке есть только <span class="btn"...>. Вам нужно ng-click. В вашем случае вы, вероятно, хотите, чтобы директива обрабатывала клик.Таким образом, изменить шаблон дИРЕКТИВЫ и определить обработчик щелчка в области действия директивы:

... 
template: "<button class='btn' ng-click='click()'>Button</button>", 
link: function(scope, element, attrs) 
{ 
    scope.click = function(){ 
     scope.target += parseInt(attrs.increment); 
    } 
} 
... 

# 3 - transclude

Теперь вам нужно получить содержимое директивы быть содержимое кнопки в шаблоне вашей директивы. Вы можете использовать параметр transclude с ng-transclude - для местоположения, для этого. Таким образом, шаблон выше изменяется на что-то вроде следующего:

... 
template: "<button class='btn' ng-click='click()'><div ng-transclude</div></button>", 
transclude: true, 
... 

Вот ваш модифицированный fiddle