绑定输出上的angularjs指令

我有这样的想法：

.controller('contr',['$scope', '$http',function($scope, $http){
    $http.post(...).success(function(){
       $scope.myTextVar = "some text here";
       $scope.completed == true;
    });
}]);

.directive('manipulateHeader',function(){
    return{
        restrict: 'A',
        link: function(scope, elem){
                console.log(angular.element(elem).find('p'));
              }
    }
});

angular.directive('manipulateHeader', function() {
  return {
    scope: {
      myTextVar: '='
    },
    controller: function($scope, myFilter) {
      // you can't use bindToController here because bindToController executes *after*
      // this function
      this.modifiedText = myFilter($scope.myTextVar);
    },
    controllerAs: 'ctrl',
    // display the modified text in a template
    template: '<span ng-bind="ctrl.modifiedText"></span>'
  };
 })
 .filter('myFilter', function() {
   return function(inputText) {
     // do some text manipulation here
   };
 });

类似这样的HTML代码段：

<div class="myClass" ng-if="completed == true" manipulate-header>
  <p>{{myTextVar}}</p>
</div>

操纵头

指令应该对

标记内的文本进行一些操纵，但是，它在替换

{myTextVar}

之前运行，因此它输出

{myTextVar}

，而不是

此处的一些文本

我怎样才能避开这个问题？（我可以在指令范围内传递变量，但我认为必须有另一种方法）

---

编辑：控制器在那里并按预期工作。这个问题和它无关。我加入它并不是为了缩短文章的篇幅。

如果需要从控制器中更改$scope变量，则需要隔离作用域

 scope:{

        myattr='@', // this will provide one way communication , you can define in your template as <p myattr="hello"><p> 
        message:'&',  //This allows you to invoke or evaluate an expression on the parent scope of whatever the directive is inside 
        message:'=' // sets up a two-way binding expression between the directive's isolate scope and the parent scope. 
    }     

范围：{
myattr='@'，//这将提供单向通信，您可以在模板中定义为

消息：'&'，//这允许您在指令的父范围内调用或计算表达式
消息：'='//在指令的隔离作用域和父作用域之间设置双向绑定表达式。
}     

---

请参阅我不确定您是否定义了$scope.myTextVar 在正确的范围内。比如，如果您在任何控制器中定义了它，那么指令应该在控制器范围内

这是更新后的HTML

<div ng-controller ="MainController">
     <div class="myClass" manipulate-header>
        <p>{{myTextVar}}</p>
    </div>
    </div> 

---

以下是@DanPantry建议的

——您很可能需要的是过滤器而不是指令

阅读本指南，了解如何使用过滤器

以下是此类过滤器的示例（来自文档）

---

如果必须是指令

如果你试图在你的链接函数中进行字符串操作，你会有一段不愉快的时光。link函数是在编译指令之前执行的（这是link函数的思想），因此任何绑定（ng bind或其他）都不会在link函数内部编译

要在编译阶段后执行代码，应使用控制器。但是，您不能在控制器中访问DOM（或者更确切地说，您不应该）。因此，合乎逻辑的解决方案是改为修改scope参数。我建议这样做：

.controller('contr',['$scope', '$http',function($scope, $http){
    $http.post(...).success(function(){
       $scope.myTextVar = "some text here";
       $scope.completed == true;
    });
}]);

.directive('manipulateHeader',function(){
    return{
        restrict: 'A',
        link: function(scope, elem){
                console.log(angular.element(elem).find('p'));
              }
    }
});

angular.directive('manipulateHeader', function() {
  return {
    scope: {
      myTextVar: '='
    },
    controller: function($scope, myFilter) {
      // you can't use bindToController here because bindToController executes *after*
      // this function
      this.modifiedText = myFilter($scope.myTextVar);
    },
    controllerAs: 'ctrl',
    // display the modified text in a template
    template: '<span ng-bind="ctrl.modifiedText"></span>'
  };
 })
 .filter('myFilter', function() {
   return function(inputText) {
     // do some text manipulation here
   };
 });

angular.directive（'manufactureheader'，function（）{
返回{
范围：{
myTextVar:“=”
},
控制器：函数（$scope，myFilter）{
//您不能在此处使用bindToController，因为bindToController在*之后执行*
//此函数
this.modifiedText=myFilter（$scope.myTextVar）；
},
controllerAs:'ctrl'，
//在模板中显示修改后的文本
模板：“”
};
})
.filter（'myFilter'，function（）{
返回函数（输入文本）{
//在这里做一些文本操作
};
});

用法：

<manipulate-header myTextVar='myTextVar'></manipulate-header>

或：

{{myTextVar|myFilter}

当然，您可以将其改为属性，但最佳实践表明，具有模板的指令应该改为元素

---

仅当您需要将其作为指令时，才能使用上述内容。否则，它几乎肯定是一个过滤器。

这是一个打字错误。实际代码是正确的。关键仍然是绑定不会在外部指令之前执行。我们在这里讨论的是什么样的操作？如果你给我们一个大致的想法，我们也许能够诊断是否有一个更简单的方法来解决你的问题（听起来好像有）无关。即使是简单的输出也应该输出替换的文本，而不是模板占位符。这个想法是，指令需要在文本绑定后运行。这不是无关紧要的。很有可能您试图做的并不是用指令，而是用某种过滤器。指令的pre、link和post-link函数是在编译指令之前执行的，这就是它们的契约。修改文本的唯一方法是替换元素内部的文本，或者在编译后修改scope变量。如果要进行一些编译后处理，请使用控制器。$scope.myTextVar=“此处的某些文本”；你是从控制器那里得到这个的吗？@DanPantry各种各样的字符串操作。对，它在某种程度上与控制器有关。我通过

$http

请求从数据库中获取该变量，因此在指令运行后将其分配给作用域。我认为这是问题的根源。我不太熟悉过滤器。我会试着理解代码，然后回来看看是否可以调整它。谢谢。请注意，您也可以通过代码使用过滤器。请看我的例子，了解如何将它同时作为一个指令和一个过滤器。现在，我意识到我的帖子是不完整的。流程是这样的。在我的控制器中，我执行

$http

请求，并从数据库中获取可变内容。这反过来意味着$scope.myTextVar很可能是在指令执行之后分配的。奇怪的是，我试图在http返回结果后使用

ng if

延迟指令执行。

这反过来意味着$scope.myTextVar很可能是在指令执行后分配的

这向我表明，您实际上只需要一个过滤器，而不是一个指令。指令仅用于与DOM交互（添加/删除元素或这些元素上的属性）。对于任何形式的逻辑，如变量操作（即使在$scope上），您都需要控制器/过滤器/服务。控制器为模型提供过滤器/服务，过滤器和服务是实际执行过滤器/服务的，然后控制器将其分配给作用域。即使考虑到您的流程，是的，您也需要过滤器（而不是指令）。即使它会按照你计划的方式工作，我仍然认为过滤器在这里更合适。我可以问一下为什么在

success

中修改字符串不是一个选项吗？你是对的，我太复杂了