我已经看到这个问题被问过几次了。但无法以正确的方式实现这些答案中提到的解决方案。我是 Angular 新手，尝试使用 Observe 或 watch 将插值表达式传递到自定义指令中以获得单向绑定(bind)。
我不确定使用 $observe 实现此行为的正确方法是什么。
我尝试过这个。
attr.$observe('oneway', function (attributeValue) {
scope.oneway = scope.$parent.$eval(attributeValue);
});
但发现以下问题
属性中的值不得包含 {{}} 否则 $eval 将 失败。
<mydir oneway=Prop1></mydir>会起作用的`<mydir oneway={{Prop1}}></mydir>` fails But this will fail my entire objective to have a one-way binding between directive and parent即使我在指令中有一个表达式，$observe get 只发射过一次。更改 {{Prop1}} 不会触发观察 功能。
- 我尝试使用 $watch 而不是 $observe。但依然面临同样的情况 问题
使用observe\watch 获取 Controller 和指令之间的单向绑定(bind)的正确方法是什么？
下面是完整的代码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestView</title>
<script src="~/Scripts/angular.js"></script>
<script>
function customdir1() {
var directiveDefinitionObject = {};
directiveDefinitionObject.templateUrl = "/CustomControl/HtmlPage1.html";
directiveDefinitionObject.scope = { oneway: "@@oneway" };
directiveDefinitionObject.link = function (scope, element, attr, ctrl) {
attr.$observe('oneway', function (attributeValue) {
scope.oneway = scope.$parent.$eval("Prop1");
});
}
return directiveDefinitionObject;
}
var app = angular.module("myapp", []).controller("myCont", function ($scope) {
$scope.Prop1 = "TestProp1Text";
}).directive("mydir", customdir1);
</script>
</head>
<body ng-app="myapp">
<div ng-controller="myCont">
{{Prop1}}
<input type="text" ng-model="Prop1" />
<mydir oneway={{Prop1}}></mydir>
</div>
</body>
</html>
模板中的标记 (HtmlPage1.html)
<b>HII</b>
{{oneway}}
<input type="text" ng-model="oneway" />
提前非常感谢..
最佳答案
假设你的指令只应该看到它的初始值，就是这样，并且一旦 ng-model 更新相同范围的参数就永远不会更新，我建议 One Time Binding (向下滚动以阅读更多内容)
An expression that starts with
::is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.
请注意，唯一真正的区别在于指令的模板，您现在在表达式中使用 :: 前缀来告诉 Angular 绑定(bind)该值，而不是为此创建任何观察程序特定范围的变量。
演示:https://jsfiddle.net/eg93q1rc/2/
Javascript:
angular
.module('testApp', [])
.controller('testCtrl', ['$scope', function($scope) {
$scope.Prop1 = 'TestProp1Text';
}])
.directive('myDir', function($parse) {
return {
scope: {
oneway: '='
},
template: '<span>{{::oneway}}</span>',
link: function(scope, element, attrs) {
}
};
});
HTML
<div ng-app="testApp" ng-controller="testCtrl">
<my-dir oneway="Prop1"></my-dir>
<input ng-model="Prop1">
</div>
关于javascript - 将插值表达式传递到 Angular 指令中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39069031/