Question

我有一个Angular应用程序，看起来像一个iPad应用程序。有一个带按钮和下拉菜单的导航栏。导航栏在我的index.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'});

按下导航栏中的按钮时，此视图中的内容会在弹出窗口中打开。但是，由于渲染按钮的标记位于控制器之外，因此没有数据绑定到它，这使得它变得毫无用处。

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

Answer 1

Angular不了解您的内容。为了使其工作，我们需要使用$compile服务编译此来源。

所以让我们创建“compilator”：

.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>

希望它会有所帮助

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

1 个答案: