使用打字稿以角度在指令中设置父属性

Question

鉴于以下html 声明了一个指令。

<div class="form-group"
     data-panda-map-search map="map"
     search-hint="#BuildingName"
     imageUri="{{imageUri}}"
     location-target="#Geolocation">
</div>

和下面的绑定（在html同级：

<div class="col-md-4">
     <img ng-src="{{imageUri}}" alt="" />
</div>

我的目标是在指令中设置imageUri值并让它更新父范围中的图像src。更改图像。

我已经这样声明了范围：

@directive('$http', '$log', 'ISearchService')
export class PandaMapSearch implements ng.IDirective
{
    scopeCopy: any;
    public restrict: string = "A";
    public scope: any =
    {
        map: "=",
        imageUri: "=",
    }
    public link: Function = (scope: any, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => {
        this.map = scope.map;
        this.scopeCopy = scope;
    }

    public setUri() {
        // attempt to set the value, and change the parent.
        this.scopeCopy.imageUri = 'new url';
    }

稍后在指令中，在一个事件中 - 我设置了this.scopeCopy.imageUri，并得到以下错误：

错误：[$compile:nonassign] 与指令“pandaMapSearch”一起使用的表达式“未定义”是不可赋值的！ http://errors.angularjs.org/1.4.9/$compile/nonassign?p0=undefined&p1=pandaMapSearch

更新

我也尝试过this.scopeCopy.$parent.imageUri = ... 这似乎设置了父值，但从未执行摘要。父作用域设置了值，但绑定永远不会更新，因此 src 属性保持不变。

Answer 1

我认为您的问题可能与 2 路绑定属性 imageUri="{{imageUri}}" @ imageUri: "=", 有关。您将 imageUri 提到为 2 路绑定属性，因此您应该只绑定该属性，而不是使用插值将其绑定为表达式值。即{{..}}。 2 路绑定属性需要一个可以赋值的属性，因此您提供了一个插值表达式，而不是绑定一个属性。

尝试绑定属性为：

imageUri="imageUri"

或将您的imageUri 绑定更改为@ 绑定（文本绑定），即

public scope: any = {
    map: "=",
    imageUri: "@", //<-- Here
    locationTarget: "@",
    searchHint: "@"
}