Angularjs 指令不更新控制器属性

我编写了一个自定义指令来检测文本框中按下的enter键。这是指令代码

import { BookmarkService } from "../services/bookmarkService";
import { qlik, QlikBookmarkInfo } from "../qlikInit";

class BookmarkListController {
/**
 * Injection parameters
 */
public static $inject: string[] = ["$scope", "bookmarkSvc"];

private $scope: ng.IScope;
private bookmarkSvc: BookmarkService;
private bookmark: QlikBookmarkInfo;
private bookmarkIndex: number;
private showToolbar: boolean = false;
public showAddTextbox: boolean = false;
public newBookmarkTitle: string = "";
private showEditBookmark: boolean = false;

public constructor(scope: ng.IScope, bookmarkSvc: BookmarkService) {
    this.$scope = scope;
    this.bookmarkSvc = bookmarkSvc;
}

public applyBookmark(bookmarkId: string, bookmarkTitle: string, bookmarkDescription: string): void {
    this.bookmark = {Id: "", Title: "", Description: ""};
    this.bookmark.Id = bookmarkId;
    this.bookmark.Title = bookmarkTitle;
    this.bookmark.Description = bookmarkDescription;
    this.showToolbar = true;
    qlik.applyBookmark("ABC", bookmarkId);
}

public createBookmark(): void {
    this.showAddTextbox = true;
}

public removeBookmark(): void {
    qlik.removeBookmark("ABC", this.bookmark.Id);
    this.bookmarkIndex = this.bookmarkSvc.bookmarksInfo.indexOf(this.bookmark);
    this.bookmarkSvc.bookmarksInfo.splice(this.bookmarkIndex, 1);
    this.showToolbar = false;
}

public editBookmark(): void {
    this.showEditBookmark = true;
    // do something
}

/* tslint:disable:no-any */
public saveBookmark(e: any): void {
    if (e.keyCode === 13) {
        qlik.createBookmark("ABC", this.newBookmarkTitle);
        this.showAddTextbox = false;
        this.newBookmarkTitle = "";
    }
}
/* tslint:enable:no-any */
}

export class BookmarkListComponent implements ng.IComponentOptions {
public templateUrl: string = "bookmarkList.html";
public controller: Function = BookmarkListController;
}

export function bookmarkEnter(): ng.IDirective {
return<ng.IDirective>{
    restrict: "A",
    scope: {
        showAddTextbox: "=?",
        newBookmarkTitle: "=?"
    },
    link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: BookmarkListController): void => {
        element.on("keyup", (e: any): void => {
            if (e.keyCode === 13) {
                qlik.createBookmark("ABC", controller.newBookmarkTitle);
                scope.$apply((): void => {
                    controller.showAddTextbox = false;
                    controller.newBookmarkTitle = "";
                });
            }
        });
    },
    controller: BookmarkListController,
    controllerAs: "$ctrlblc",
    bindToController: true
};
}

从“./services/BookmarkService”导入{BookmarkService}；
从“./qlikInit”导入{qlik，QlikBookmarkInfo}；
类书签列表控制器{
/**
*注入参数
*/
公共静态$inject:string[]=[“$scope”，“bookmarkSvc”]；
私有$scope:ng.IScope；
私有书签svc：书签服务；
私人书签：QlikBookmarkInfo；
私人书签索引：数字；
私有showToolbar:boolean=false；
public showAddTextbox:boolean=false；
public newBookmarkTitle:string=“”；
私有showEditBookmark:boolean=false；
公共构造函数（作用域：ng.IScope，bookmarkSvc:BookmarkService）{
这个.$scope=scope；
this.bookmarkSvc=bookmarkSvc；
}
公共applyBookmark（bookmarkId:string，bookmarkTitle:string，bookmarkDescription:string）：无效{
this.bookmark={Id:，Title:，Description:：}；
this.bookmark.Id=bookmark Id；
this.bookmark.Title=书签标题；
this.bookmark.Description=书签描述；
this.showToolbar=true；
applyBookmark（“ABC”，bookmarkId）；
}
public createBookmark（）：void{
this.showAddTextbox=true；
}
public removeBookmark（）：void{
qlik.removeBookmark（“ABC”，this.bookmark.Id）；
this.bookmarkIndex=this.bookmarkSvc.bookmarksInfo.indexOf（this.bookmark）；
this.bookmarkSvc.bookmarksInfo.splice（this.bookmarksindex，1）；
this.showToolbar=false；
}
public editBookmark（）：void{
this.showEditBookmark=true；
//做点什么
}
/*tslint:禁用：无任何*/
public saveBookmark（e:any）：无效{
如果（如keyCode===13）{
createBookmark（“ABC”，this.newBookmarkTitle）；
this.showAddTextbox=false；
this.newBookmarkTitle=“”；
}
}
/*tslint:启用：无任何*/
}
导出类BookmarkListComponent实现ng.IComponentOptions{
公共模板URL:string=“bookmarkList.html”；
公共控制器：函数=BookmarkListController；
}
导出函数bookmarkEnter（）：ng.IDirective{
返回{
限制：“A”，
范围：{
showAddTextbox:“=？”，
newBookmarkTitle:“=？”
},
链接：（作用域：ng.IScope，元素：ng.IAugmentedJQuery，属性：ng.IAttributes，控制器：BookmarkListController）：void=>{
元素上（“keyup”，（e:any）：void=>{
如果（如keyCode===13）{
createBookmark（“ABC”，controller.newBookmarkTitle）；
范围.$apply（（）：void=>{
controller.showAddTextbox=false；
controller.newBookmarkTitle=“”；
});
}
});
},
控制器：书签列表控制器，
controllerAs:“$ctrlblc”，
bindToController:true
};
}

我在bookmarkList.html文件中使用如下指令

<div class="dsh-ListTitle">
<h4 class="dsh-ListTitle-title">Bookmarks</h4>
<a class="dsh-List-item" ng-click="$ctrl.createBookmark()">
    <ers-icon name="add" ers-tooltip="Add Bookmark"></ers-icon>
</a>
</div>
<div class="u-flex dsh-List dsh-List-icon" ng-show="$ctrl.showToolbar">
<a class="dsh-List-item" ng-click="$ctrl.editBookmark()">
    <ers-icon name="edit" ers-tooltip="Edit Bookmark"></ers-icon>
</a>
<a class="dsh-List-item" ng-click="$ctrl.removeBookmark()">
    <ers-icon name="delete" ers-tooltip="Delete Bookmark"></ers-icon>
</a>    
</div>
<ul class="dsh-List">
<li class="dsh-List-item" ng-repeat="bookmark in $ctrl.bookmarkSvc.bookmarksInfo">
    <a ng-click="$ctrl.applyBookmark(bookmark.Id, bookmark.Title, bookmark.Description)">{{bookmark.Title}}</a>
</li>
<li class="dsh-List-item" ng-show="$ctrl.showAddTextbox">
    <input type="text" bookmark-enter showAddTextbox="$ctrl.showAddTextbox" newBookmarkTitle="$ctrl.newBookmarkTitle" ng-show="$ctrl.showAddTextbox"/>        
</li>
</ul>

书签


{{bookmark.Title}

我想我把一切都接好了。在

qlik.createBookmark（）。它以空字符串的形式出现。如果我计算
element.val（）
，则表示在文本框中输入了文本

我错过了什么？正在使用AngularJS 1.5版。
您的主要错误是传递指令的属性名称
需要明确的是，如果您有
作用域：{showAddTextbox:'=？'}
（camelCase），则必须在html中传递属性，如
控制器代码在哪里？您希望如何将文本绑定到控制器？您正在将非角度属性绑定到controller.newBookmarkTitle。尝试将newBookmarkTitle=“$ctrl.newBookmarkTitle”替换为此ng模型=“$ctrl.newBookmarkTitle”我也尝试过，它也会返回一个空字符串。基本上，typescript类中最初设置的值就是指令中读取的值。UI中所做的更改没有反映出来。还有一件事，我看到您在绑定中使用的是controllerAs$ctrlblc，而$ctrl。这些不应该是相同的值吗？我也已经纠正了，结果仍然是一样的。这部分地解决了问题。showAddTextbox字段现在正在获取更新的值。newBookmarkTitle值在更新为kebab案例后仍然是一个空字符串（直到现在才知道这个术语存在）<代码>
有什么想法吗？我在代码中所做的唯一更新是针对烤肉串案例。我没有做其他建议的改变。嗨@sanchin。。。我认为这是一个空字符串，因为您没有为此变量设置任何值（至少看到了控制器代码）。但是您希望newBookmarkTitle包含用户输入的文本吗？可能您将其用作输入的
ng model
，而不是指令参数。是的，我添加了ng model属性，并从UI获取值。非常感谢。
<input type="text" bookmark-enter show-add-textbox="$ctrl.showAddTextbox" ng-model="$ctrl.newBookmarkTitle" ng-show="$ctrl.showAddTextbox"/>

restrict: "A",
scope: {
    showAddTextbox: "=?",
    newBookmarkTitle: "=ngModel"
},
link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: BookmarkListController): void => {
    element.on("keyup", (e: any): void => {
        if (e.keyCode === 13) {
            qlik.createBookmark("ABC", scope.newBookmarkTitle);
            scope.$timeout(() => {
                scope.showAddTextbox = false;
                scope.newBookmarkTitle = "";
            });
        }
    });
},