0

我有一个 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'});

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

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

4

1 回答 1

2

Angular 不知道您的内容。为了使它工作，我们需要使用service编译这个源代码。$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>

希望它会有所帮助

于 2013-10-02T14:43:59.447 回答