Javascript 将插值表达式传递到角度指令的步骤_Javascript_Angularjs_Angularjs Directive_Angular Directive

Javascript 将插值表达式传递到角度指令的步骤

javascript angularjs

Javascript 将插值表达式传递到角度指令的步骤,javascript,angularjs,angularjs-directive,angular-directive,Javascript,Angularjs,Angularjs Directive,Angular Directive,这个问题我已经见过好几次了。但无法以正确的方式实施这些答案中提到的解决方案。我不熟悉Angular，尝试使用Observe或watch将插值表达式传递到自定义指令中，以获得单向绑定我不确定使用$observe实现这种行为的正确方法是什么我试过这个 attr.$observe('oneway', function (attributeValue) { scope.oneway = scope.$parent.$eval(attributeValue);

这个问题我已经见过好几次了。但无法以正确的方式实施这些答案中提到的解决方案。我不熟悉Angular，尝试使用Observe或watch将插值表达式传递到自定义指令中，以获得单向绑定

我不确定使用$observe实现这种行为的正确方法是什么

我试过这个

attr.$observe('oneway', function (attributeValue) {
                    scope.oneway = scope.$parent.$eval(attributeValue);
                });

但发现以下问题

属性中的值不能包含{{}，否则$eval将失败<代码>将起作用

`<mydir oneway={{Prop1}}></mydir>` fails

 But this will fail my entire objective to  have a one-way binding
between directive and parent

``失败
但这将无法实现我的单向约束的全部目标
在指令和父指令之间

即使指令中有表达式，$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>


测试视图
函数customdir1（）{
var directiveDefinitionObject={}；
directiveDefinitionObject.templateUrl=“/CustomControl/HtmlPage1.html”；
directiveDefinitionObject.scope={单向：“%单向”}；
directiveDefinitionObject.link=函数（范围、元素、属性、ctrl）{
属性$observe（'oneway'，函数（attributeValue）{
scope.oneway=scope.$parent.$eval（“Prop1”）；
});
}
返回directiveDefinitionObject；
}
var-app=angular.module（“myapp”，[]）.controller（“myCont”，函数（$scope）{
$scope.Prop1=“TestProp1Text”；
}).指令（“mydir”，customdir1）；
{{Prop1}}

模板中的标记（HtmlPage1.html）

HII
{{单向}}

提前非常感谢。

这是你需要的一把小提琴

这是一把你需要的小提琴

假设您的指令只应该看到它的初始值，也就是它，并且在ng模型更新相同的作用域参数时从不更新，我建议（向下滚动阅读更多）

以

：：

开头的表达式被视为一次性表达式表情。一次性表达式一旦被删除，将停止重新计算稳定，如果表达式结果为是一个未定义的值

请注意，唯一真正的区别在于指令的模板，您现在使用表达式中的

：

前缀来告诉angular绑定值，而不是为这个特定范围的变量创建任何观察者

演示：

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) {

      }
    };
  });

angular
.module（'testApp'，[]）
.controller（'testCtrl'，['$scope'，函数（$scope）{
$scope.Prop1='TestProp1Text'；
}])
.directive（'myDir'，函数（$parse）{
返回{
范围：{
单向：'='
},
模板：“{{：：单向}}”，
链接：函数（范围、元素、属性）{
}
};
});

Html

我建议，假设您的指令只应该看到它的初始值，也就是它的初始值，并且在ng模型更新同一范围内的参数后永远不会更新（向下滚动阅读更多内容）

以

：：

开头的表达式被视为一次性表达式表情。一次性表达式一旦被删除，将停止重新计算稳定，如果表达式结果为是一个未定义的值

请注意，唯一真正的区别在于指令的模板，您现在使用表达式中的

：

前缀来告诉angular绑定值，而不是为这个特定范围的变量创建任何观察者

演示：

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) {

      }
    };
  });

angular
.module（'testApp'，[]）
.controller（'testCtrl'，['$scope'，函数（$scope）{
$scope.Prop1='TestProp1Text'；
}])
.directive（'myDir'，函数（$parse）{
返回{
范围：{
单向：'='
},
模板：“{{：：单向}}”，
链接：函数（范围、元素、属性）{
}
};
});

Html

非常感谢你的小提琴。但我看到了一个多方向的数据流。我更新了小提琴来演示它。。你能检查一下吗？我只需要有一个从控制器到指令的单向流，然后使用“@”。我更新了小提琴。只是不要对绑定变量使用单向名称。我在小提琴中使用了

。非常感谢。。。“只是不要对绑定变量使用单向名称。”…是问题的解决方案。。“单向”是保留字吗？你可以看到，即使在你的小提琴中，如果你用单向代替x，它也不会起作用。是的，我也不知道。也许有一个名为oneway的角度内置指令。非常感谢您的帮助。但我看到了一个多方向的数据流。我更新了小提琴来演示它。。你能检查一下吗？我只需要有一个从控制器到指令的单向流，然后使用“@”。我更新了小提琴。只是不要对绑定变量使用单向名称。我在小提琴中使用了

。非常感谢。。。“只是不要对绑定变量使用单向名称。”…是问题的解决方案。。“单向”是保留字吗？你可以看到，即使在你的小提琴中，如果你用单向代替x，它也不会起作用。是的，我也不知道。可能有一个名为oneway的角度内置指令。@gyc是的，它有点隐藏@gyc是的，这有点隐蔽！

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

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) {

      }
    };
  });

<div ng-app="testApp" ng-controller="testCtrl">
   <my-dir oneway="Prop1"></my-dir>
   <input ng-model="Prop1">
</div>