gpt4 book ai didi

javascript - $scope 和 ng-model 在同一指令中

转载 作者:行者123 更新时间:2023-12-02 14:54:51 27 4
gpt4 key购买 nike

我有一个指令保存在 Controller 的模型中。它是一个“文本按钮”(根据要求),它只是一个只读文本框。每个“行”有 3 个文本按钮,共有 13 个“行”。

我需要拉出一个选择模式并根据单击的内容加载一些数据,以便可以进行新的选择。

虽然 Controller 上的模型发生了变化,但当选择模态弹出时我不知道发生了什么变化。

型号:

$scope.Lines = {
"eg1": { one: '', two: '', three: '' },
"eg2": { one: '', two: '', three: '' },
"eg3": { one: '', two: '', three: '' },
"eg4": { one: '', two: '', three: '' },
... 9 more ...
};

指令:

.directive('textButton', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function ($scope, elm, attrs, ctrl) {
elm.on('click', function () {
$scope.popModal(this); //<--I want the ng-model here!
});
},
template: '<input type="text" readonly="readonly" class="form-control" />'
};
});

查看:

<ul>
<li> <text-button ng-model="Lines.eg1.one"></text-button> </li>
<li> <text-button ng-model="Lines.eg1.two"></text-button> </li>
<li> <text-button ng-model="Lines.eg1.three"></text-button> </li>
<ul>
<ul>
<li> <text-button ng-model="Lines.eg2.one"></text-button> </li>
<li> <text-button ng-model="Lines.eg2.two"></text-button> </li>
<li> <text-button ng-model="Lines.eg2.three"></text-button> </li>
<ul>
... 11 more ...

我查看了 $watch 和 $scope.watch,但似乎没有任何东西能够告诉我特定模型中发生了什么变化。

https://stackoverflow.com/a/15113029/1913371

最佳答案

最后,您需要隔离指令的范围,以便有机会访问每行的 ngModel:

scope: {
ngModel: '@',
popModal: '='
}

然后你可以在回调中使用它:

elm.on('click', function () {
$scope.popModal($scope.ngModel); //<--you get the ng-model here!
});

但是,这意味着您也失去了对 popModal() 的访问权限,我猜它是在 Controller 范围中定义的。要解决此问题,您需要将其作为第二个参数传递(我将其命名为 pop-modal):

<text-button ng-model="Lines.eg1.one" pop-modal="popModal"></text-button>

将它们结合在一起,here's a JSBin使用 Angular 1.2(尽管你确实应该远离它)。

关于javascript - $scope 和 ng-model 在同一指令中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35900668/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com