Question

我是angularjs的新手，并且尝试执行这个简单的任务来更新我在调用控制器中的指令中设置的范围变量时遇到了一些麻烦。

所以我有一个指令：

app.directive('pageShell', function (){
    return{
        restrict: 'AE',
        transclude: true,
        replace: true
        scope:{
            title: '@',
            body: '@',
            footer: '@'
        },
        template: '<div class="title-content">{{title}}</div>' +
                  '<div class="body-content">{{body}}</div>' +
                  '<div class="footer-content">{{footer}}</div>'
    }
});

所以在我的HTML中：

<page-shell title="Header" body="this is my body" footer="Footer" />

在我的控制器中：

app.c

ontroller("myCtrl", function ($scope) {

    // TEST 1 - simple scope change
    // switch pages or content so change some values
    if(pageIndex === 2) {
      $scope.title = "Page 2 title";
      $scope.body = "Page 2 body content";
      $scope.footer = "Page 2 footer";
    }

    // TEST 2 - change by using apply
    $scope.$apply(function() {
            $scope.title = "Page 2 title";
            $scope.body = "Page 2 body content";
            $scope.footer = "Page 2 footer";
    });
});

所以我尝试在我的控制器中认为我应该在我的范围内访问我的变量来直接更改它但它没有工作但没有抛出任何错误。使用$apply尝试但错误$apply已在进行中？尝试使用=代替@替换标题，正文和页脚中的双向绑定，但会出现$parse:syntax错误。

任何线索为什么这个简单的任务不起作用？谢谢！

Answer 1

想出来：我的pageShell指令的范围必须是：

scope:{
    title: '=',
    body: '=',
    footer: '='
},

绑定需要双管齐下。

html：

<page-shell title="Header" body="this is my body" footer="Footer" />

和控制器：

Controller("myCtrl", function ($scope) {

    // TEST 1 - simple scope change
    // switch pages or content so change some values
    if(pageIndex === 2) {
      $scope.title = "Page 2 title";
      $scope.body = "Page 2 body content";
      $scope.footer = "Page 2 footer";
   }

   // TEST 2 - change by using apply
   $scope.$apply(function() {
   $scope.title = "Page 2 title";
   $scope.body = "Page 2 body content";
   $scope.footer = "Page 2 footer";
  });
});

Answer 2

您的HTML应该是这样的

<page-shell title="{{title}}" body="{{body}}" footer="{{footer}}" />

Angularjs：从控制器更新指令范围变量不起作用

2 个答案: