Question

我可能只是在这里迷惑自己。但我有一个变量和文本组合的视图。我需要将整个内容作为字符串存储在我的模型中。即

<h3>
  {{vars.color}} is my color: {{theme.color.black}};
</h3>

我希望能够将字符串保存到：

{{preference.string}} // as 'base is my color: #000'

显示文字没问题。但我想保存整个字符串。（好像我可以添加ng-model）到'h3'标签。但这不起作用。

我应该在函数或指令中执行此操作吗？

提前致谢...

Answer 1

通常从控制器触摸DOM被认为是不好的。

但是，在你的情况下，我没有看到其他选项，因为你只是从DOM中读取并且没有以任何方式操纵它，它没有那么糟糕。

假设您在控制器中呈现了文本，您可以使用$element来访问该元素，然后获取文本内容。同样，这是最后的手段，反对Angular哲学。

var app = angular.module("myApp", [])
app.controller("HomeController", HomeController);

function HomeController($scope,$element) {
    $scope.vars = {};
    $scope.vars.color = "Black";
    $scope.theme = {color:{}};
    $scope.theme.color.black = "#000000";

    $scope.snap = function(){
        alert($element.find("h3").text()); // will alert the text
    }
}

Here is a working example

或者，您可以使用$compile将此逻辑与控制器（以及使用过的DOM）完全分离。这是一个相当长的例子，但是它让你看看Angular的做事方式，这不需要应用程序。

var $inj = angular.injector(["ng"]); // get access to Angular's services
var template = "<h3>{{vars.color}} is my color: {{theme.color.black}}</h3>"

//now let's access the compilation service, and also a scope service and get a new scope.
var $compile = $inj.get("$compile");
var $scope = $inj.get("$rootScope").$new(true);

// put our stuff in this new scope
$scope.vars = {color:"White"};
$scope.theme = {color:{black:"#000000"}};

// add the template 
var ngTemplate = $compile(angular.element(template));
var result = ngTemplate($scope); 
$scope.$apply(); // tell angular to apply changes to the scope
console.log(result.text()); // now we have our rendered text.
// calling $destroy on the scope here is probably good ;)

here is a fiddle for that

但是，你确定你所寻找的不是部分观点吗？什么是目的？

Answer 2

我认为有指令嵌入不同的html内容很好。你可以做这样的事情。

<h3 show-data>
</h3>

指令：

 angular.module('myApp', [])
  .controller('Ctrl', function($scope) {
    $scope.vars.color = "base";
    $scope.theme.color.black = "#000";
  })
  .directive('showData', function() {
    return {
      template: '{{vars.color}} is my color: {{theme.color.black}}'
    };
  });

控制器中的范围更改：

$scope.preference.string = $scope.vars.color + "is my color: " + $scope.theme.color.black;

将AngularJS模板保存为字符串

2 个答案:

Here is a working example

here is a fiddle for that