指令中不可分配的对象

Question

In this plunk 我有一个包装 div 的指令。 div 在 ng-if 条件为真时显示（通过单击按钮设置）。

该指令有一个作用域元素 css，它是一个对象，其中该对象有一个属性 width。问题是 Angular 在显示指令时抱怨；单击按钮时在控制台中看到以下错误消息：

Expression '{ width: width}' in attribute 'css' used with directive 'modal' is non-assignable!

请注意，删除指令中的 $timeout 后，此问题就会消失，但我无法丢弃它。

为什么会发生这种情况以及如何解决它（保留 $timeout）？

HTML

<button ng-click="open()">Open modal</button>
<div modal ng-if="showModal" css="{ width: width}">
    <p>some text in modal</p>
</div>

Javascript

angular.module("app", [])

.controller('ctl', function($scope) {

  $scope.width = '200px';
  $scope.open = function(){
    $scope.showModal = true;
  };
})

.directive("modal", function($timeout) {

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = { css: '=' };

    directive.templateUrl = "modal.html";

    directive.link = function (scope, element, attrs) {

            $timeout(function(){
                 scope.css.height = '100%';
            },100);

     };

     return directive;

});

模板

<style>
#modaldiv{
  border:2px solid red;
}
</style>
<div id="modaldiv" ng-style="{'width': css.width,'height': css.height}">
    Some content
</div>

Answer 1

出现错误是因为您没有将范围变量传递给 css 属性。

您可以通过在 ctrl 中创建一个包含 css 的变量并将此变量传递给 css 属性来解决此问题。

控制器

$scope.css = {width: $scope.width};

HTML

<div modal ng-if="showModal" css="css">
    <p>some text in modal</p>
</div>

或者在指令中创建 css 的本地深层副本，并在 $timeout.

中操作该副本

指令

directive.link = function (scope, element, attrs) {
    scope.cssCopy = angular.copy(scope.css);
    $timeout(function(){
        scope.cssCopy.width = '100%';
    }, 100);
};

模板

<div id="modaldiv" ng-style="{'width': cssCopy.width,'height': cssCopy.height}">
    Some content
</div>

指令中不可分配的对象

Object not assignable in directive

angularjs

angularjs-directive