将内插表达式传递给 Angular 指令

Question

我看到这个问题被问过几次了。但是无法以正确的方式实施那些答案中提到的解决方案。我是 Angular 的新手，正在尝试使用 Observe 或 watch 将内插表达式传递到自定义指令中以获得单向绑定。

我不确定使用 $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 获得控制器和指令之间的单向绑定的正确方法是什么？

完整代码如下

<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" />

提前致谢..

Answer 1

这是您需要的 fiddle。 https://jsfiddle.net/Tsalikidis/eg93q1rc/

<mydir oneway="foo"></mydir>

并且只需将“=”用于指令的范围

...
scope: {
  oneway: '='
}

Answer 2

假设你的指令只应该看到它的初始值，就是这样，一旦 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 绑定值而不创建任何观察者对于这个特定范围的变量。

演示：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>

将内插表达式传递给 Angular 指令

To pass an interpolated expression into an Angular Directive

javascript

angularjs

angularjs-directive

angular-directive