Question

我有像这样的AngularJS控制器

var myModule = angular.module('test', []);

myModule.controller('PendataanMainController',
  function($scope, $http)
  {
    $scope.stat1 = "";
    $scope.stat2 = "stat2";

    $scope.AmbilStat1 = function()
    {
      $scope.stat1 = "Hallo stat1";
    };

    $scope.AmbilStat2 = function()
    {
      $scope.stat2 = "Hallo stat2";
    }



  }
);

myModule
  .directive(
    'fonloaded',
    function()
    {
      return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
          var this_element = angular.element(element);

          this_element.bind(
            'click',
            function()
            {
              //this_element.html('<h2>Hallo dari directive</h2>');
              scope.stat1 = "Hallo dari directive";
            }
         );

          scope.$apply();

        }
      }


    }
  );

和像这样的HTML

<div ng-app="test" ng-controller="PendataanMainController" class="columns clear bt-space15">

  <div class="col1-2 fl-space2">

    <div class="content-box">
      <div class="box-body">

        <div fonloaded class="box-header clear">
          <h2>{{stat1}}</h2>
        </div>

        {{AmbilStat2()}}

        <div class="box-wrap clear">
          {{stat2}}
        </div>

      </div>

    </div>

  </div>


  <div class="col1-2 lastcol">

    <div class="content-box">
      <div class="box-body">

        <div class="box-header clear">
          <h2>Stat 2</h2>
        </div>

        <div class="box-wrap clear">
          {{stat2}}
        </div>

      </div>

    </div>

  </div>

</div>

我制作了一个自定义指令'fonloaded'并将其放在这一部分：

<div fonloaded class="box-header clear">
  <h2>{{stat1}}</h2>
</div>

单击它时，指令链接功能会更改stat1的值。我希望在html中反映出新的stat1。但事实并非如此。

我正在为Chrome使用AngularJS扩展程序。我可以看到stat1值已经改变，但是这个改变没有反映在html上。

会出现什么问题？

Answer 1

http://plnkr.co/edit/4kiJwrG8Xo0unrNc9Fw7?p=preview

请参阅固定样本：

function()
    {
      return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
          var this_element = angular.element(element);

          this_element.on('click',
            function(e)
            {
              // alert('1');
              //this_element.html('<h2>Hallo dari directive</h2>');
              scope.stat1 = "Hallo dari directive";
              scope.$apply();
            } );
        }
      }


    }

Answer 2

我必须补充一点，我在HTML模板中工作（比如主题林中的模板）。我已经从HTML模板中删除了ng-app部分，使其独立。现在它反映了模型的变化。

不知何故，HTML模板使用jQuery来修改具有fonloaded指令的标签。结果{{stat1}}因HTML模板转换而丢失。

无法反映模型的变化

2 个答案: