Question

我有一个控制器值，它与我的指令中的值绑定了＆＃34; =＆＃34;。

但是当我更新指令中的值，然后调用控制器中的函数时，在执行det控制器功能之前，控制器值不会更新。

这就是我实现它的方式：

HTML：

<my-directive page="searchCriterias.page" search-parent="search()" ></my-directive>

JavaScript的：

  app.controller('MainCtrl', function ($scope) {

        $scope.searchCriterias: {page: 1};

        $scope.search = function() {
             SearchService.findCasesByCriteria($scope.searchCriterias).then(function (res) {
                //show search result
             }, function (e) {

             });
        }
    });


    app.directive('myDirective', function () {
        return {
            restrict: 'E',
            template: "<div><button ng-click='nextPage()'>next</button></div>",
            replace: true,
            scope: { page: '=', searchParent: '&searchParent' }
            },
            link: function ($scope, element, attr) {

                $scope.nextPage(){
                    $scope.page++;
                    $scope.searchParent();
                }

            }
        }
    )

问题是在执行搜索功能之前页面没有更新，因此findCasesByCriteria正在使用错误的页码。（如果我在指令中调用$ scope.searchParent（）之前超时，则在调用控制器函数之前更新值）

Answer 1

有两个想法马上就来找我。

您可以使用＆＃39;＆amp;＆＃39;将控制器功能传递到隔离范围。而不是＆＃39; =＆＃39;。通过执行此操作，您可以从指令中调用函数，确保值已更改

否则，您可以在控制器中设置$ watch，以便在值更改时调用该函数

Answer 2

我认为您的问题是由于您处于儿童范围内。有关更多信息，请参见此处https://egghead.io/lessons/angularjs-the-dot。

你可以试试这个：

<my-directive search-criterias="searchCriterias" search-parent="search()" ></my-directive>

和：

app.directive('myDirective', function () {
  return {
    restrict: 'E',
    template: "<div><button ng-click='nextPage()'>next</button></div>",
    replace: true,
    scope: { searchCriterias: '=', searchParent: '&searchParent' },
    link: function ($scope, element, attr) {
      $scope.nextPage(){
        $scope.searchCriterias.page++;
        $scope.searchParent();
      }
    }
  }
);

Answer 3

我认为没有必要做任何事情。您只需在调用指令函数之前添加$ .apply（）函数。

app.directive('myDirective', function () {
        return {
            restrict: 'E',
            template: "<div><button ng-click='nextPage()'>next</button></div>",
            replace: true,
            scope: { page: '=', searchParent: '&searchParent' }
            },
            link: function ($scope, element, attr) {

                $scope.nextPage(){
                    $scope.page++;
                    $scope.$apply();
                    $scope.searchParent();
                }

            }
        }
    )

这就是它应该工作!!

从指令更新控制器值和调用控制器函数。在调用函数之前，控制器值未更新

3 个答案: