Javascript AngularJS-范围在链接函数中重置，我做错了什么？

我是AngularJS的初学者，我读过编译和链接方面的文章，但我仍然无法理解发生了什么

我有以下静态代码（类属性来自引导）：

然后我用一个链接函数声明了一个指令：

app.directive('linkButton', function () {
    return {
        scope: true,
        restrict: "E",
        replace: true,
        template: "<a href=''>{{currency}}</a>",
        link: function (scope, elem, attrs) {
            elem.bind('click', function() {
                alert(scope.typeOfValue);
                scope.typeOfValue = scope.currency;
                alert(scope.typeOfValue);
            });
        }
    }
});

app.directive（'linkButton'，function（）{
返回{
范围：正确，
限制：“E”，
替换：正确，
模板：“”，
链接：功能（范围、要素、属性）{
元素绑定（'单击'，函数（）{
警报（范围.类型值）；
scope.typeOfValue=scope.currency；
警报（范围.类型值）；
});
}
}
});

如你所见，我已经在那里设置了两个警报。货币包含类似于[“美元”、“朗”、“昂”、“英镑”]的内容。它创建了一个我可以点击的所有货币的列表

当我点击一个不想更改“typeOfValue”的项目时，我会发出警告，第一个显示“USD”，因为“typeOfValue”默认设置为USD，而不是

scope.typeOfValue=scope.currency被执行，第二个警报出现，表示
scope.typeOfValue
现在是单击的货币，例如“RON”。但当我再次点击一个元素时，它再次告诉我“USD”，而不是其他货币（例如“GBP”）。。。它不想更改
中的文本，也不想保存
typeOfValue
的新内容

我做错了什么？我怎样才能做到这一点？

问题与解析绑定时作用域继承的工作方式有关。您已经为指令创建了一个子范围（
scope=true
），这意味着将使用原型范围继承来解析范围变量。如果您不知道这意味着什么，那么概念很简单：如果在当前范围中找不到范围变量，它将在父范围中查找绑定；如果它不在父范围内，它将在父范围内寻找绑定，等等，直到它找到范围变量或没有，并在$rootScope处停止

作用域继承的工作方式是，如果您使用原语设置作用域变量，就像您在这里所做的那样：

scope.typeOfValue = scope.currency;

规则说angular将在子作用域上创建变量的卷影副本，其名称与父作用域变量相同。这有效地打破了模型绑定，因为现在有两个单独的模型，每个模型位于不同的范围内

要解决此问题，请使用scope.obj.typeOfValue，而不是scope.typeOfValue，并在父控制器中初始化obj：

 scope.obj = { typeOfValue: {} };

HTML:





通过在模型中引入“.”，angular将使用范围继承查找模型（在点的左侧）。一旦在父范围中找到它，它将分配“typeOfValue”属性，该属性只是模型上的一个属性。这将保留绑定，以便当子范围中的typeOfValue更改时，它将更新父范围中的同一模型（反之亦然）

[编辑]

指令需要使用ng click（非click），因为click不会触发摘要循环。以下是更新的指令：

app.directive('linkButton', function () {
    return {
        scope: true,
        restrict: "E",
        replace: true,
        template: "<a href='#' ng-click='setCurrency(currency)'>{{currency}}</a>",
        link: function (scope, elem, attrs) {
            scope.setCurrency = function(currency) {
                //alert(scope.typeOfValue);
                scope.obj.typeOfValue = scope.currency;
                //alert(scope.typeOfValue);
            };
        }
    }
});

app.directive（'linkButton'，function（）{
返回{
范围：正确，
限制：“E”，
替换：正确，
模板：“”，
链接：功能（范围、要素、属性）{
scope.setCurrency=函数（货币）{
//警报（范围.类型值）；
scope.obj.typeOfValue=scope.currency；
//警报（范围.类型值）；
};
}
}
});
变量obj.typeOfValue现在已更改，数据已保存，但绑定仍不起作用，{{obj.typeOfValue}}中的值未更改。。。我可能需要编译而不是链接？我注意到您使用的是“单击”而不是ng click。我已经更新了我的答案。谢谢，就像“魔术”一样。我刚写完一本书，顺便提出了你的建议，效果很好：
 scope.obj = { typeOfValue: {} };

<ul class='nav nav-pills nav-stacked'>
    <li><a href='#', ng-click="obj.typeOfCurrency = 'Bitcoin'">Bitcoin</a></li>
    <li><a href='#', ng-click="obj.typeOfCurrency = 'Litecoin'">Litecoin</a></li>

app.directive('linkButton', function () {
    return {
        scope: true,
        restrict: "E",
        replace: true,
        template: "<a href='#' ng-click='setCurrency(currency)'>{{currency}}</a>",
        link: function (scope, elem, attrs) {
            scope.setCurrency = function(currency) {
                //alert(scope.typeOfValue);
                scope.obj.typeOfValue = scope.currency;
                //alert(scope.typeOfValue);
            };
        }
    }
});