Question

我正在使用从控制器到指令的角度单向绑定。当我更新指令中的值时，它不应更新控制器中的值。但它正在起双向约束力。有人可以找到我的错误。

angular.module("myApp",[])  
  .directive("myDirective",['$timeout', function ($timeout) {
    return {
      scope: {myValue: "&myAttribute"},
      template: '<input type="text" ng-model="myValue().name">',
      link: function (scope, iElm, iAttrs) {
        var x = scope.myValue();
        console.log(x);
        $timeout(function(){
          x.name= "directive";
        },4000);
      }
    };
  }]).controller("myController", function ($scope, $timeout) {
    $scope.someObject = {name: "test"};
    $timeout(function(){
      $scope.someObject.name= "controller";
    },2000);

});

http://plnkr.co/edit/9wihx1VYgKoTK00awN67?p=preview

Answer 1

根据文档（对于1.xx）https://docs.angularjs.org/api/ng/service/ $ compile＆符号将返回在父作用域（getter）中执行的属性表达式的值，在本例中是一个对象引用，对任何对象属性的更改都将反映在两者中。

但是，在指令范围内对myValue的更改不会影响父作用域。

Answer 2

我不确定是否有更简单的方法，但您可以在隔离范围内使用@绑定的单向绑定，并在属性上添加观察者以更新指令中的对象。 / p>

@绑定从父项获取数据并将它们作为字符串传递给指令。要创建对象，您必须使用scope.$eval(interpolatedStrValue)。

（Ampersand绑定在其他答案中没有提到，因为getter将引用传递给父对象。所以任何更改都会更新父对象。）

请查看下面的演示或此fiddle。

angular.module('demoApp', [])
	.directive('oneWay', OneWay)
  .controller('mainController', MainController);
  

function OneWay($timeout, $parse) {
	return {
  	scope: {
    	myValue: '@myAttribute'
    },
  	template: '<input type="text" ng-model="myValue.name"/>',
    link: function(scope, element, attrs) {
    	console.log('link', scope.myValue);
      attrs.$observe('myAttribute', function(myValStr) {
      	scope.myValue = scope.$eval(myValStr);
        console.log('controller myValue obj', scope.myValue);
      });
      
      $timeout(function() {
      	console.log('change dir');
        scope.myValue.name = "directive changed";
       }, 4000);
      
      
    }
  }
}

function MainController($scope, $timeout) {
	$scope.testObj = {
  	name: 'before mod.'
  };
  
  $timeout(function() {
  	$scope.testObj.name = 'Controller modify';
  }, 2000);
  
  $timeout(function() {
  	$scope.testObj.name = '2nd Controller modify';
  }, 8000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
  Controller: {{testObj.name}}<br/>
  Directive: <one-way my-attribute="{{testObj}}"/>
</div>

Answer 3

您应该使用“@”代替“＆amp;”如下所示

scope: {myValue: "@myAttribute"}

以下链接说明

What is the difference between & vs @ and = in angularJS

angular指令单向绑定控制器中的变化值

3 个答案: