控制器外部的角度绑定数据

Angular bind data outside of controller

本文关键字：绑定 数据 外部 控制器      更新时间：2023-09-26

我有一个看起来像iPad应用程序的Angular应用程序。有一个带有按钮和下拉菜单的导航栏。导航栏在我的索引.html文件中声明。现在在我的不同页面中，我想向导航栏添加功能。现在我正在像这样向导航栏添加按钮

    $rootScope.actionButtons.push({
    icon:   'icon-history',
    content:    '<select ng-change="previewRevision()" ng-model="revision">'
                    <option value="">--Backlog--</option>
                    <option ng-repeat="old in journal.backlog" value="{{old.revision}}">Revision {{old.revision}}</option>
                </select>',
    title:  'Visa backlog'});

按下导航栏中的按钮时，此视图中的内容将在弹出框中打开。但是，由于用于呈现按钮的标记位于控制器之外，因此没有数据绑定到它，这使得它有点无用。

如何绑定当前范围之外的数据？

Angular 不知道你的内容。为了使其工作，我们需要使用$compile服务编译此源代码。

所以让我们创建"编译器"：

.directive( 'compileData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var elmnt;
      attrs.$observe( 'template', function ( myTemplate ) {
        if ( angular.isDefined( myTemplate ) ) {
          // compile the provided template against the current scope
          elmnt = $compile( myTemplate )( scope );
            element.html(""); // dummy "clear"
          element.append( elmnt );
        }
      });
    }
  };
});

将指令添加到 HTML 中，例如：

 <div compile-data template="{{actionButtons.content}}"></div>

编译后，您将使用下面提到的 HTML 绑定您的范围

           <select ng-change="previewRevision()" ng-model="revision">'
                <option value="">--Backlog--</option>
                <option ng-repeat="old in journal.backlog" value="{{old.revision}}">Revision {{old.revision}}</option>
            </select>

希望会有所帮助

相关文章：