Question

我似乎无法在Angular指令中找到合适的绑定。我有以下代码：

HTML

<div ng-app="choreApp">
    <div ng-controller="ChoreCtrl">
        <div ng-repeat='chore in Chores'>
          <h2 announce clicky-thing='updateName({chore: chore})' style='color: {{chore.color}}'>{{chore.name}} <== chore </h2>   
        </div>

        <hr />
        <input type="text" ng-model='chore.name' />
        <input type="text" ng-model='chore.color' />
        <br />
        <button ng-click='updateName({chore: chore})'>Update Name to {{Chore.name}}</button>




     </div>
</div>

// javascript

var app = angular.module("choreApp", []);

app.controller("ChoreCtrl", function ($scope) {
    $scope.Chores = [
        {name: 'Dude', color: 'blue'},
        {name: 'Guy', color: 'black'},
        {name: 'Dudette', color: 'red'},
        {name: 'Gal', color: 'orange'}
    ];


    $scope.updateName = function (chore) {
        alert('okay ' + chore.name);
    };
});


app.directive("announce", function () {
    return {
        restrict: "A",
        scope: {
            clickyThing: '&'
        },
        link: function (scope, elem, attrs) {

            elem.bind('click', function () {
                scope.clickyThing({chore: chore});
            });
        }
    };
});

JSFiddle：http://jsfiddle.net/k8xYX/14/

有四个h2，每个都与自己的chore对象绑定。我想要的是能够单击其中一个h2，将该个体chore绑定到控制器的范围（并使用chore的模型数据填充输入），更新一个输入元素，单击“更新名称”按钮，让该模型数据更新被点击的h2。

Answer 1

这是一个更新的小提琴：

Fiddle

更新指令：

app.directive("announce", function () {
    return {
        restrict: "A",
        scope: {
            clickyThing: '&',
            chore: '='
        },
        link: function (scope, elem, attrs) {
            var chore = scope.chore;
            elem.bind('click', function () {

                scope.clickyThing(chore);
            });
        }
    };
});

解决的问题：

您已宣布宣布指令的孤立范围，但尚未导入“家务”杂志＆＃39;模型进入你的孤立范围 - 但是当你执行clickyThing（）时你引用了家务。我已对其进行了更改，以便您的指令可以导入＆＃39;模型。

您使用{chore：chore}作为传递给点击处理程序的模型 - 这不是必需的。我已经对此进行了更改，以便直接通过模型。

在updateName（）方法中，从Angular上下文外部调用它，因此我在$ apply块中包含了杂项分配。这可确保在执行代码后触发$摘要。

我同意凯文，你应该使用ng-click。

Answer 2

您的对象是{chore: chore}，因此您应该在警报中引用chore.chore.name而不是chore.name。

$scope.updateName = function (chore) {
    alert('okay ' + chore.chore.name);
    //$scope.Chore.color = 'pink';
};

或者你可以改变传递方式：

clicky-thing='updateName(chore)'

此外，$ scope.clickyThing实际上引用了一个可执行函数，该函数包含使用clicky-thing属性中的文本创建的函数，您只需要执行它而不需要任何参数。

elem.bind('click', function () {
    scope.clickyThing();
});

http://jsfiddle.net/k8xYX/16/

除非你做的不仅仅是执行传入的代码，否则你应该只使用ng-click。

AngularJs：在指令之间共享模型数据

2 个答案: