Question

我对AngularJs有些新意，所以请原谅我，如果这是一个新问题，但我已经看了一下，但却无法解决这个问题。

我正在尝试将对象的属性发送到指令中，我不太清楚为什么这不起作用。

我有一个范围变量，它是一个对象，如：

$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属性。

编辑：我已经做了一个jsfiddle来说明我要做的事情：http://jsfiddle.net/csafo41x/

Answer 1

有一种方法可以在控制器和指令之间共享范围。这是Dan Wahlin关于指令范围共享的非常好的帖子 - http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

有三种方法可以这样做

@用于将字符串值传递给指令
=用于创建与传递给指令
＆安培;允许将外部函数传递到指令并调用

关于如何使用上述范围的一个非常基本的例子

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 - 模板

实际上需要处理click事件。在你的小提琴中只有<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参数与ng-transclude - 用于位置。因此，上面的模板被修改为类似以下内容：

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

这是您修改后的fiddle

AngularJs：将范围对象的属性绑定到指令

2 个答案: