如何從控制器獲取傳遞值返回到AngularJS中的指令模板屬性？

Question

我已經創建了一個AngularJS指令，如下所示。 在相關控制器中，我計算變量text的值爲"SomeText"。我希望這個文本替換指令的template屬性中的Hello World!!。我該怎麼做？

我的HTML：

<myp-directive myarg="myObject"></myp-directive> 

我的指令：

myApp.directive('mypDirective',function(){ 
    return { 
     restrict:'E', 
     scope: { 
     myarg: '=' 
     }, 
     controller: 'DirectiveCtrl', 
     controllerAs: 'directiveCtrl', 
     bindToController: true, 
     template: 'Hello World!!' 
    }; 
    } 
); 

我的控制器：

myApp.controller('DirectiveCtrl', function($scope){ 
    var self = this; 
    $scope.$watch(function() {return self.prediction;}, function (newVal, oldVal) 
    { 
     if (newVal !== oldVal && newVal !== null){ 
      var text = "SomeText"; 
     } 
    }); 
}); 

Answer 1

，這將是可用模板。

Pascal Precht寫了相當廣泛的explanation about controllerAs。

控制器

myApp.controller('DirectiveCtrl', function($scope){ 
    var self = this; 
    self.text = "Hello World!!"; 
    $scope.$watch(function() {return self.prediction;}, function (newVal, oldVal) 
    { 
     if (newVal !== oldVal && newVal !== null){ 
      self.text = "SomeText"; 
     } 
    }); 
}); 

指令

myApp.directive('mypDirective',function(){ 
    return { 
     restrict:'E', 
     scope: { 
     myarg: '=' 
     }, 
     controller: 'DirectiveCtrl', 
     controllerAs: 'directiveCtrl', 
     bindToController: true, 
     template: '{{directiveCtrl.text}}' 
    }; 
    } 
); 

Answer 2

使用範圍。將文本'Hello World'綁定到作用域變量（數據），並將其作爲{{data}}在模板中綁定。從控制器更改範圍變量的值。

由於您使用的controllerAs: 'directiveCtrl'配置，你可以簡單地分配"SomeText"作爲控制器（個體經營）的可變看看這個fiddle

指令

myApp.directive('mypDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     myarg: '=' 
    }, 
    controller: 'DirectiveCtrl', 
    controllerAs: 'directiveCtrl', 
    bindToController: true, 
    template: '{{data}}', 
    link: function(scope, elem, attr, directiveCtrl) { 
     scope.data = "Hello World!!!" 
    } 
    }; 
});