无法将具有范围属性的对象传递给angular指令

时间:2019-01-17 14:39:06

标签: javascript angularjs

我正在尝试通过属性将对控制器范围进行引用的对象传递给angular指令。对象基本上代表了一些复杂的模型,该模型绑定到html。我的问题是它会被复制,并且当它到达作用域时会引发异常。

我有个笨拙的例子(https://next.plnkr.co/edit/0jCSMhWs6fgDEpMW)。 (在控制台中)例外是

previewer.41a48d826afff4888855.js:14 Error: [ng:cpws] Can't copy! Making copies of Window or Scope instances is not supported.
    at VM838 angular.dew.js:144
    at copyElement (VM838 angular.dew.js:1102)
    at copyRecurse (VM838 angular.dew.js:1072)
    at copyElement (VM838 angular.dew.js:1115)
    at copyRecurse (VM838 angular.dew.js:1072)
    at copyElement (VM838 angular.dew.js:1115)
    at copy (VM838 angular.dew.js:1047)
    at Scope.$digest (VM838 angular.dew.js:19294)
    at Scope.$apply (VM838 angular.dew.js:19655)
    at bootstrapApply (VM838 angular.dew.js:1981)

基本代码如下:

import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope, $rootScope) {
  $scope.directiveModel = {
    name: 'Kappa',
    thatScope: $rootScope
  };
}).directive('some', function (){
  return {
        scope: {
            details: '=',
        },
        link: function (scope, element, attrs) {
          element.append(scope.details.someProperty.name);
        }
    };
});

标记

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello</h1>
      <p some details='{someProperty: directiveModel}'>Start editing and see your changes reflected here!</p>
    </div>
  </body>
</html>

0 个答案:

没有答案