Question

我几次问过这个问题。但是无法以正确的方式在这些答案中实现解决方案。我是Angular的新手并尝试使用Observe或者观察将插值表达式传递给自定义指令以获得单向绑定。

我不确定使用$ 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

假设您的指令只应该看到它的初始值，并且只有在ng-model更新相同的作用域参数时才更新它，我建议One Time Binding（向下滚动以阅读更多内容）

以::开头的表达式被视为一次性表达式表达。一次性表达式一旦停止就会停止重新计算稳定，如果表达式结果在第一次摘要后发生是一个非未定义的值。

请注意，唯一真正的区别在于您的指令的模板，您现在使用表达式中的::前缀来告诉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>

Answer 2

这是你需要的小提琴。 https://jsfiddle.net/Tsalikidis/eg93q1rc/

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

只需使用＆＃39; =＆＃39;指示范围

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

将插值表达式传递给Angular Directive

2 个答案: